3

我对 javascript 很陌生，但我需要一些东西，比如假设我有一个白色背景按钮，当我单击它一次时，它的背景应该变为黑色，当我再次单击它时，它的背景应该再次变为白色。意味着我需要在单击同一个按钮时更改同一个按钮的背景，请帮助我，我真的很困惑，我也处于 javascript 的学习阶段，所以如果你能告诉我更多关于 javascript 的信息或除我之外的任何想法需要，谢谢你，谢谢。

4

2 回答 2

4

你可以试试这样的

HTML：

<button class="btn">Toggle Background</button>

CSS：

.btn{
    background:#fff;
}

.btn_red{
    background:red;
}

JS：

$(function(){
    $('.btn').on('click', function(){
        $(this).toggleClass('btn_red')
   });
});

演示。

香草 JavaScript：

window.onload = function(){
    document.querySelector('.btn').onclick = function(){
        if(this.className.match('btn_red')) {
            this.className = 'btn';
        }
        else {
            this.className = 'btn btn_red';
        }
    };
};

演示。 还有其他方法，但这些只是一些想法。

于 2013-09-30T02:57:29.177 回答
1

一个 jQuery 解决方案是

http://jsfiddle.net/zMrtL/（我将文本颜色设置为红色，以便在切换时它不会最终在黑色上显示黑色文本，即不可见。）

CSS

#div { /* use any selector that matches your desired element */
    background-color: #FFF;
}

#div.dark { /* the "dark" class to be added by jQuery, 
               put your above selector in front to increase specificity */
    background-color: #000;
}

关于“特异性”的问题，如果不加#div在前面dark，#div定义会覆盖.dark定义，div会保持白色，即使是jQuery添加的。如果您想了解更多信息，请查看此或此。

JavaScript/jQuery

// ensure HTML is ready/completely loaded, so that you won't end up 
// binding click to something non-existent (at the time the binding occurs)
// Trying to bind something non-existent will not work because jQuery can never know
// if there is such element in the future, unless you use delegates (far fetched)
$(function(){ 
    // on click, bind the "click" event to your element, and do something
    $('#div').click(function(){
        $(this).toggleClass('dark'); // on click, toggle the class of the element clicked
        // i.e. if the class does not exist, add it, otherwise remove it.
        // in jQuery, "this" is the element clicked/mouse-overed/etc.. i.e. target of the event
        // in functions passed to jQuery event-binding functions.
        // CSS/browsers is smart enough to detect these class changes and apply styles to new elements.
    });
});

#div表示具有 id 的元素divie <div id="div"></div>，as#表示具有以下 ID 的元素。如果你有课，即<div class="div"></div>使用.div

click、toggleClass和将函数传递给 jQuery 构造函数的文档

于 2013-09-30T02:55:15.060 回答