Javascript css（）赢了’；不要设置CSS

由于某种原因，当我使用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>

这是蓝色的盒子

这是红色的盒子

所以在您的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');
    }
  });

});

---

正如您已经知道的，选择器无效，因为您在ID上进行了选择，但在标记中定义了一个类。即使对于有经验的JavaScript开发人员来说，这也很容易做到，也很难发现

避免与坏选择器相关的痛苦 要调试此类问题，请使用调试器控制台。输入代码问题区域的选择器，然后按Enter键：

$('#blueCheckDiv')

如果得到此结果，则该选择器在页面上不存在

j…y.fn.init {context: document, selector: "#blueCheckDiv"}

---

如果您的标记在JavaScript之前就存在，您可能会发现用这种方式构建选择器是最简单的。在将它们添加到JavaScript代码之前，将它们输入控制台进行测试。

使用下面的代码，它工作得很好（将Id更改为class）

$（文档）.ready（函数（）{
$（“#buttonrow.button”）。单击（函数（）{
var click_id=$（this.attr（“id”）；
如果（单击\u id==“红色按钮”）{
控制台日志（“红色”）；
$（'.redCheckDiv'）.css（'display'，'block'）；
}否则{
控制台日志（“蓝色”）；
$（'.blueCheckDiv'）.css（'display'，'block'）；
}
});
});

您在HTML中输入了带有类的2

div

，但在jQuery中将它们标记为

id

，以下是正确的代码：

$（文档）.ready（函数（）{
$（“#buttonrow.button”）。单击（函数（）{
var click_id=$（this.attr（“id”）；
如果（单击\u id==“红色按钮”）{
控制台日志（“红色”）；
$（'.redCheckDiv'）.css（'display'，'block'）；
}否则{
控制台日志（“蓝色”）；
$（'.blueCheckDiv'）.css（'display'，'block'）；
}
});
});

这是蓝色的盒子

这是红色的盒子

您想要实现什么功能？您使用的是#id选择器，但在html代码属性中是class，因此，请使用class选择器，例如：$（'.redCheckDiv'）…似乎是元素选择器pbm…哈哈，是的，我使用的是id选择器。。。哈哈，很抱歉在发布之前没有意识到这一点。在修复了选择器之后，它现在可以工作了。
<script type="text/javascript">
$(document).ready(function() {
    $("#buttonrow .button").click(function() {

        var click_id = $(this).attr("id");

        if (click_id == 'redbutton') {
            console.log("red");
            $('.redCheckDiv').css('display', 'block');
        } else {
            console.log("blue");
            $('.blueCheckDiv').css('display', 'block');
        }
    });

});
</script>