显示隐藏 if 语句 jquery答案

【问题标题】：Show Hide if statement jquery显示隐藏 if 语句 jquery
【发布时间】：2012-10-24 00:00:01
【问题描述】：

我正在使用 jQuery UI Slider，并且在滑块的每个位置都会吐出一个数字值 (ui.value)，所以我想根据作为滑块位置的数字显示 div 并隐藏所有其余的。

例如：如果滑块位于数字 4 上，则显示 div #pos4

这是我设法想出的，并且有效。我的问题是如何使代码更小/更好？

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 &amp; Events</div>
<div id="pos6" class="off"><br />Instructional Support</div>

CSS

.off {
display:none;
}

【问题讨论】：

标签： jquery html css if-statement show-hide

【解决方案1】：

至少你可以做到：

slide: function( event, ui ) {

     $(".off").hide();
     $("#pos"+ui.value).show();

});

【讨论】：

【解决方案2】：

您已经编写了很多重复的代码。您可以使用 pos 变量并显示相应的 div..

slide: function( event, ui )
{
   var pos = ui.value;

   $(".off").hide() ; // Hide all
   $('#pos' + pos).show();  // Show corresponding div
}

【讨论】：

要在此基础上添加一个包装器，这样您也可以定位特定的 div。 jsfiddle.net/xYnzw

【解决方案3】：

或者，您可能想尝试这样的事情：

    <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 &amp; 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/

【讨论】：

我喜欢这个，因为它确实减少了 HTML 中的污垢。谢谢！除此之外，我只是缓存了 '.off' 类，这样 jquery 就不必每次都跳转到 DOM。