Новое в javascript, пытаясь понять это

Question

Так что я пытаюсь активировать несколько огней при нажатии кнопки, и я не уверен, что я здесь делаю неправильно.

Я думал, что смогу сделать это в функции, а затем передать ему имя, но похоже, что это не действует так, как я хочу.

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>

Answer 2

Исправлено: http://jsfiddle.net/0m9wos1r/4/

2 проблемы нужно исправить:

Вызов функции внутри вызова щелчка. Таким образом, используя анонимную функцию:

$('#red_button').click(function(){click('#red')}); 

Селектор в пределах функции щелчка. Вроде так:

$(e).addClass('active');