javascript - javascript新手试图解决这个问题

Question

所以我试图让多个灯在单击按钮时激活，但我不确定我在这里做错了什么。

我以为我可以将其变成一个函数，然后将 id 名称传递给它，但看起来它并没有按照我想要的方式运行。

html

<div class="lights">
    <div id="red"></div>
    <div id="yellow"></div>
    <div id="green"></div>
</div>

<div class="button">
    <button id="red_button"> Red Button </button>
    <button id="yellow_button">Yellow Button </button>
    <button id="green_button">Green Button </button>
</div>

CSS

.lights{
    height: 600px;
    width: 200px;
    background-color: black;
    padding-top: 15px;
}

.button{
    padding-top: 20px;
}

#red, 
#yellow,
#green {
    margin: 0 auto;
    background-color: black;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    margin-top: 10px;
}

#red.active {
    background-color: red;
}

#yellow.active {
    background-color: yellow;
}

#green.active {
    background-color: green;
}

jquery

function click(e) { 
   $('#red,#yellow,#green').removeClass('active');
   $('e').addClass('active');
}

$('#red_button').click(click('#red'));
$('#yellow_button').click(click('#yellow'));
$('#green_button').click(click('#green'));

http://jsfiddle.net/0m9wos1r/1/

Answer 1

一些事情。我不建议在事件之后命名您的函数，尽管它仍然可以工作。您的代码的问题是您立即调用该函数，并在函数中引用了该参数。改用这个:

function click(e) {
    $('#red,#yellow,#green').removeClass('active');
    $(e).addClass('active');
}
$('#red_button').click(function () {
    click('#red')
});
$('#yellow_button').click(function () {
    click('#yellow')
});
$('#green_button').click(function () {
    click('#green')
});

.lights {
    height: 600px;
    width: 200px;
    background-color: black;
    padding-top: 15px;
}
.button {
    padding-top: 20px;
}
#red, #yellow, #green {
    margin: 0 auto;
    background-color: black;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    margin-top: 10px;
}
#red.active {
    background-color: red;
}
#yellow.active {
    background-color: yellow;
}
#green.active {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="lights">
    <div id="red"></div>
    <div id="yellow"></div>
    <div id="green"></div>
</div>
<div class="button">
    <button id="red_button">Red Button</button>
    <button id="yellow_button">Yellow Button</button>
    <button id="green_button">Green Button</button>
</div>