我正在使用jQuery UI Slider,并且在滑块的每个位置都会吐出一个数字值(ui.value),所以我想根据滑块位置的数字显示div并隐藏所有其余的。
例如:如果滑块在数字4上显示div#pos4
这是我设法提出的并且有效。我的问题是如何才能使代码更小/更好?
JS
slide: function( event, ui ) {
var pos = ui.value,
off = $(".off");
if (pos == 1) {
$(off).hide();
$("#pos1").show();
};
if (pos == 2) {
$(off).hide();
$("#pos2").show();
};
if (pos == 3) {
$(off).hide();
$("#pos3").show();
};
if (pos == 4) {
$(off).hide();
$("#pos4").show();
};
if (pos == 5) {
$(off).hide();
$("#pos5").show();
};
if (pos == 6) {
$(off).hide();
$("#pos6").show();
};
HTML
<div id="pos1" class="off" style="display: block;"><br />STAR</div>
<div id="pos2" class="off"><br />Tech Expo</div>
<div id="pos3" class="off"><br />VisFest</div>
<div id="pos4" class="off"><br />ITL</div>
<div id="pos5" class="off"><br />Conferences & Events</div>
<div id="pos6" class="off"><br />Instructional Support</div>
CSS
.off {
display:none;
}
答案 0 :(得分:2)
至少你能做到:
slide: function( event, ui ) {
$(".off").hide();
$("#pos"+ui.value).show();
});
答案 1 :(得分:2)
你写了很多重复的代码。您可以使用 pos 变量并显示相应的div ..
slide: function( event, ui )
{
var pos = ui.value;
$(".off").hide() ; // Hide all
$('#pos' + pos).show(); // Show corresponding div
}
答案 2 :(得分:1)
或者,你可能想尝试这样的事情:
<div id="allpos">
<div class="off"><br />STAR</div>
<div class="off"><br />Tech Expo</div>
<div class="off"><br />VisFest</div>
<div class="off"><br />ITL</div>
<div class="off"><br />Conferences & Events</div>
<div class="off"><br />Instructional Support</div>
</div>
slide: function( event, ui ) {
var index = ui.value;
$('.off').hide();
$('#allpos').children(':nth-child('+ index +')').show(); //nth-child's index starts at 1
};
它与其他的有点不同,但有一点好处是你不需要为每个div创建id
属性。
有关nth-child
选择器的更多详细信息:http://api.jquery.com/nth-child-selector/