jQuery .css()不会设置CSS

Question

出于某种原因,当我使用jQuery .css()时,它不会改变我的CSS.我已经多次检查过了,语法似乎是正确的.

我可以看到它正在运行操作,所以唯一不起作用的是CSS行:

jQuery的:

var document = this;

jQuery(document).ready(function($){
    console.log("document ready");


jQuery("#buttonrow .button").click(function(){
    var $this = $(this);

    console.log("button clicked");
    if($this.attr("id") == 'redbutton'){
        console.log("red");
        $('#redCheckDiv').css('display', 'block');
    } else {
        console.log("blue");
        $('#blueCheckDiv').css('display', 'block');
    }
});

});

HTML

<div class="row" id="buttonrow">
    <div class="col-md-5 col-md-offset-1 button" id="bluebutton">
    <div class="blueCheckDiv"></div>
        <div class="col-md-10 col-md-offset-1 text-center" id="text-container">
            <p>This is the blue box</p>
        </div>
    </div>
    <div class="col-md-5 button" id="redbutton">
    <div class="redCheckDiv"></div>
        <div class="col-md-10 col-md-offset-1 text-center" id="text-container">
            <p>this is the red box</p>
        </div>
    </div>
</div>

Answer 1

所以在你的html中,你创建了redcheckdiv和bluecheckdiv作为类而不是id.所以你必须使用点而不是#.以下是答案.

var document = this;

jQuery(document).ready(function($){
    console.log("document ready");


  jQuery("#buttonrow .button").click(function(){
    var $this = $(this);

    console.log("button clicked");
    if($this.attr("id") == 'redbutton'){
        console.log("red");
        $('.redCheckDiv').css('display', 'block');
    } else {
        console.log("blue");
        $('.blueCheckDiv').css('display', 'block');
    }
  });

});