0

我已经复制了一段代码。我对网络语言非常陌生，并且来自 java 背景。

JQuery 看起来很棒，但我就是不知道如何解决这个问题。

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

谢谢你。

4

8 回答 8

6

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

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

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

jQuery：

    $('#clickme').click(function(){
        $(this).toggleClass('red');
    })
于 2012-04-26T12:40:34.227 回答
1

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 对象的函数，在这种情况下 this 不是 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');
        }
    });
});​

这是最后的小提琴：

这将帮助您了解问题所在。此外，该方法不是最佳实践。使用 toggleClass 并在 CSS 中设置元素的样式。Answers21241 和 iambriansreed 提供了很好的方法。

于 2012-04-26T12:55:11.393 回答
0

使用 $(this) 而不是 this。它代表选择器。

于 2012-04-26T12:54:36.713 回答
0

使用 $(this) 作为 JQuery 对象访问 this 元素

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

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

    if(color == '#cc0000'){
        $(this).css('background', '#00CC00');
    }else{
        $(this).css('background', '#CC0000');
    }
})
于 2012-04-26T12:45:49.663 回答
0

摆弄

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

});​
于 2012-04-26T12:46:22.713 回答
0

戈登，你的代码有几个问题。首先是您需要将this. $()那代表#clickme元素。

其次，您对背景的要求比您预期的要详细得多。您可以alert或 console.log 什么被返回找出为什么您的 if 语句的行为不像您预期​​的那样。如此处所见。

更新：这是更新的方法：

$('#clickme').click(function() {
    var color = $(this).css('backgroundColor');
    if(color == "rgb(0, 204, 0)") {
        $(this).css('backgroundColor', '#CC0000');
    }else{
        $(this).css('backgroundColor', '#00CC00');
    }
});​
于 2012-04-26T12:47:03.980 回答
0

应该是这样的

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

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

    if(color == '#cc0000'){
        $(this).css('background-color', '#00CC00');
    }else{
        $(this).css('background-color', '#CC0000');
    }
})​;
于 2012-04-26T12:51:56.713 回答
0

正如其他人所说，它应该是 $(this) 而不是 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');
    }
})​
于 2012-04-26T12:50:58.690 回答