JavaScript新手試圖找出這

所以我想讓按鈕點擊多個燈激活，我不知道我在這裏做錯了什麼。JavaScript新手試圖找出這

我想我可以把它做成一個函數，然後傳遞給它的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/

來源

2014-09-25 Mathew Skittles

要添加類項目與e'的'標籤，這似乎不正確... ...當你調用一個函數與傳遞的參數，你需要把它包在匿名功能。 – PlantTheIdea 2014-09-25 19:41:05

如果你更清楚地描述你要完成的工作，這將會有所幫助。這從代碼中看不出來。 – isherwood 2014-09-25 19:41:50

你傳入一個變量e，但將類添加到字符串'e'而不是（e）.addClass - 儘管這裏可能會有更多錯誤。 – 2014-09-25 19:42:19

有幾件事情。我不會推薦在事件發生後指定你的功能，儘管它仍然可以工作。你的代碼的問題是你立即調用該函數，並在函數中引用該參數。使用這個來代替：

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>

來源

2014-09-25 19:42:09 j08691

題外話，因爲我們什麼時候可以直接從答案運行代碼片段？ – 2014-09-25 19:46:56

@JeremyD - 2014年9月16日:) http://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/ – j08691 2014-09-25 19:55:38

謝謝！真是太酷了。 – 2014-09-25 19:56:10

修正：你需要修復http://jsfiddle.net/0m9wos1r/4/

2個問題：

點擊呼叫中的函數調用。像這樣，使用匿名函數：

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

點擊功能中的選擇。像這樣：

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

來源

2014-09-25 19:43:29 Scott

JavaScript新手試圖找出這

回答

相關問題