Question

我已经复制了一段代码。我是网络语言的新手，来自java背景。

JQuery似乎很棒，但我无法弄清楚如何解决这个问题。

http://jsfiddle.net/MMf9Q/2/

谢谢。

Answer 1

我已经更新了你的小提琴，因为我认为你期待它。

我删除了if / else语句和简单使用的jQuery切换功能（http://api.jquery.com/toggle/）。制作了一个我希望对象转换为的类。我发现这使代码更加清晰和有条理。

固定代码： http://jsfiddle.net/MMf9Q/6/

jQuery的：

    $('#clickme').click(function(){
        $(this).toggleClass('red');
    })

Answer 2

Answers21241和iambriansreed有可爱的答案，给出了你想要完成的事情。

但是对于你的代码，我想提出一些建议。

首先，这是您原来的javascript代码：

$('#clickme').click(function(){

    var color = this.css('background');

    if(color == '#cc0000'){
        this.css('background', '#00CC00');
    }else{
        this.css('background', '#CC0000');
    }
})

1）您必须将代码包装在$(function(){});中，以便jquery在页面加载后执行它。否则，您的javascript代码将在DOM完全加载之前执行，并且在大多数情况下它将无法工作：

$(function(){
    $('#clickme').click(function(){
        var color = this.css('background-color');
                    alert(color);
        if(color == '#CC0000'){
            this.css('background-color', '#00CC00');
        }else{
            this.css('background-color', '#CC0000');
        }
    });
});

2）this.css()无效。 .css()是jquery对象的函数，在这种情况下，这不是jquery对象。必须用$()包装它以从任何dom元素构造一个jquery对象：

$(function(){
    $('#clickme').click(function(){
        var color = $(this).css('background-color');
        if(color == '#CC0000'){
            $(this).css('background-color', '#00CC00');
        }else{
            $(this).css('background-color', '#CC0000');
        }
    });
});

3）颜色值可能与您给出的颜色值不同。浏览器主要将十六进制颜色值转换为RGB值，您得到的结果会有所不同。请尝试alert(color);以获取价值，并相应地更改代码。

$(function(){
    $('#clickme').click(function(){
        var color = $(this).css('background-color');
                    alert(color);
        if(color == '#CC0000' || color == 'rgb(204, 0, 0)'){
            $(this).css('background-color', '#00CC00');
        }else{
            $(this).css('background-color', '#CC0000');
        }
    });
});

以下是最终fiddle：

这将帮助您了解错误。此外，这种方式不是最好的做法。使用toggleClass并在css中设置元素的样式。 Answers21241和iambriansreed提供了很好的方法。

Answer 3

使用$（this）作为JQuery对象访问此元素

$('#clickme').click(function(){

    var color = $(this).css('background-color');

    if(color == '#cc0000'){
        $(this).css('background', '#00CC00');
    }else{
        $(this).css('background', '#CC0000');
    }
})

Answer 4

<强>拨弄

http://jsfiddle.net/nTXPC/

<强> CSS

.red {
 background:#CC0000;
}
.green {
 background:#00CC00;
}

<强> HTML

<div id="clickme" class="red"> Click me </div>

<强> JS

$('#clickme').click(function(){

   $(this).toggleClass('red green');

});

Answer 5

戈登，你的代码有一些问题。首先，您需要将this包裹在$()中。这代表#clickme元素。

其次，您的背景请求比您期望的要详细得多。你可以alert或者console.log返回什么，以找出你的if语句不像你期望的那样行为的原因。 As seen here.

更新：以下是updated approach：

$('#clickme').click(function() {
    var color = $(this).css('backgroundColor');
    if(color == "rgb(0, 204, 0)") {
        $(this).css('backgroundColor', '#CC0000');
    }else{
        $(this).css('backgroundColor', '#00CC00');
    }
});

Answer 6

正如其他人所说，它应该是$（this）而不是这个。我还建议将$（this）保存到另一个变量以达到性能目的。这可能没有必要在这里做，但这是一个很好的习惯，特别是如果你循环通过某些东西。像这样：

$('#clickme').click(function(){

    var clickedElement = $(this);
    var color = clickedElement.css('background');

    if(color == '#cc0000'){
        clickedElement.css('background', '#00CC00');
    }else{
        clickedElement.css('background', '#CC0000');
    }
})

Answer 7

应该是这样的

$('#clickme').click(function(){

    var color = $(this).css('background-color');

    if(color == '#cc0000'){
        $(this).css('background-color', '#00CC00');
    }else{
        $(this).css('background-color', '#CC0000');
    }
});

Answer 8

使用$（this）代替此。它代表选择器。

JQuery点击+这不起作用

8 个答案: