Question

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

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

jQuery的：

/usr/share/jenkins$ java -jar /usr/share/jenkins/jenkins.war
Running from: /usr/share/jenkins/jenkins.war
webroot: $user.home/.jenkins
Nov 19, 2016 10:01:43 AM Main deleteWinstoneTempContents
WARNING: Failed to delete the temporary Winstone file /tmp/winstone/jenkins.war
Nov 19, 2016 10:01:43 AM org.eclipse.jetty.util.log.JavaUtilLog info
INFO: Logging initialized @1599ms
Nov 19, 2016 10:01:43 AM winstone.Logger logInternal
INFO: Beginning extraction from war file
Nov 19, 2016 10:01:44 AM winstone.Logger logInternal
INFO: Winstone shutdown successfully
Nov 19, 2016 10:01:44 AM winstone.Logger logInternal
SEVERE: Container startup failed
java.io.FileNotFoundException: /var/lib/jenkins/.jenkins/war/META-INF/MANIFEST.MF (No such file or directory)
        at java.io.FileOutputStream.open(Native Method)
        at java.io.FileOutputStream.<init>(FileOutputStream.java:221)
        at java.io.FileOutputStream.<init>(FileOutputStream.java:171)
        at winstone.HostConfiguration.getWebRoot(HostConfiguration.java:280)
        at winstone.HostConfiguration.<init>(HostConfiguration.java:83)
        at winstone.HostGroup.initHost(HostGroup.java:66)
        at winstone.HostGroup.<init>(HostGroup.java:45)
        at winstone.Launcher.<init>(Launcher.java:143)
        at winstone.Launcher.main(Launcher.java:352)
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
        at java.lang.reflect.Method.invoke(Method.java:606)
        at Main._main(Main.java:264)
        at Main.main(Main.java:112)

HTML

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

});

Answer 1

所以在你的HTML中，您已将redcheckdiv和bluecheckdiv创建为class而不是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');
    }
  });

});

Answer 2

如您所知，您的选择器无效，因为您在ID上选择了，但在您的标记中定义了一个类。即使是经验丰富的JavaScript开发人员，这也很容易做到，而且很难发现。

避免与不良选择者相关的疼痛

要调试此类问题，请使用调试器控制台。输入代码有问题区域的选择器，然后按Enter键：

$('#blueCheckDiv')

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

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

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

Answer 3

使用以下代码完美地工作（将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>

Answer 4

您在HTML中输入了2 div个类，但是您在jQuery中将它们标记为id，这是正确的代码：

$(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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

希望这有帮助！

jQuery .css（）不会设置CSS

4 个答案:

避免与不良选择者相关的疼痛