javascript - 为什么我的 jquery 没有改变我的 div ？

Question

我正在尝试更改顶部 div，因此当选择任一按钮时，它将根据单击的按钮进行更改。

HTML

    <div class="bulb" id="bulb1"></div>
    <div class="bulb" id="bulb2"></div>
    <button id="blue">blue</button>
    <button id="yellow">yellow</button>

JQUERY

$( document ).ready(function() {

    // initial load up coverts to this colour
    $('.bulb1').css("background-color","black");    

    //call the colour change functions when clicked
    $('#blue').click("background-color", "setBlue");
    $('#yellow').click("background-color", "setYellow");

});

function setYellow(){

    $('#bulb1').css("background-color","#yellow");

}

function setBlue(){

    $('#bulb1').css("background-color","#blue");

}

Answer 1

尝试这样的事情:

$('#blue').click(function() {
    $('#bulb1').css({
        'background-color' : 'blue'
    });
});

或者

$('#blue').click(function() {
    setBlue();
});

function setBlue() {
    $('#bulb1').css({
       'background-color': 'blue'
     });    
}

您可以重构代码，如下所示:

$(document).ready(function() {

    // initial load up coverts to this colour
    setColor('black');  

    //call the colour change functions when clicked
    $('#blue').click(function() {
      setColor('blue');
    });

    $('#yellow').click(function() {
      setColor('yellow');
    });

});

function setColor(color) {    
    $('#bulb1').css({
       'background-color': color
     });    
}