有沒有一種以更簡單的方式編寫代碼的方法? 下面的代碼示例顯然使用jQuery,只是因爲它看起來很簡單。我相信肯定有更好的辦法,因爲它重複了功能的內容。 我感到困惑的是我如何將觸發器中的ID傳遞給單個函數。有沒有更簡單的方法來編寫這段代碼?
當然,我意識到這可以用JavaScript來完成 - 任何編碼指針,將不勝感激也。
感謝
這是HTML:
$(document).ready(function() {
$('.carImage').hide();
$('#triggerA').click(function(e) {
$("#imageA").show();
$("#imageB").hide();
$("#imageC").hide();
$("#imageD").hide();
});
$('#triggerB').click(function(e) {
$("#imageA").hide();
$("#imageB").show();
$("#imageC").hide();
$("#imageD").hide();
});
$('#triggerC').click(function(e) {
$("#imageA").hide();
$("#imageB").hide();
$("#imageC").show();
$("#imageD").hide();
});
$('#triggerD').click(function(e) {
$("#imageA").hide();
$("#imageB").hide();
$("#imageC").hide();
$("#imageD").show();
});
});
.item {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 3em;
padding: 1em;
margin: 0.5em;
background-color: #36F;
color: #FFF;
width: 75px;
float: left;
}
.item:hover {
background-color: #F0C;
}
a {
text-decoration: none;
color: #FFF;
}
#selectors {
overflow: auto;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="selectors">
<div class="item" id="triggerA">
A
</div>
<div class="item" id="triggerB">
B
</div>
<div class="item" id="triggerC">
C
</div>
<div class="item" id="triggerD">
D
</div>
</div>
<img src="http://dummyimage.com/100/ff0" id="imageA" class="carImage" />
<img src="http://dummyimage.com/100/f0f" id="imageB" class="carImage" />
<img src="http://dummyimage.com/100/0ff" id="imageC" class="carImage" />
<img src="http://dummyimage.com/100/0f0" id="imageD" class="carImage" />
嗯,你已經用JavaScript做什麼呢? – adeneo
你可以用css來完成所有的工作,只取決於你想要的確切功能。 – Kenyanke
您可以在選擇器中一次選擇多個項目(例如$('#imageB,#imageC,#imageD')。hide()) – tabz100