javascript - 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');
    }
  });

});