2016-05-14 49 views
1

我想隱藏所有使用此選擇器選擇的元素$('[href^=#Low]'),然後僅顯示其中一個元素。我使用此代碼但不工作。用jquery隱藏數字元素,然後顯示

如何解決這一問題?

HTML:

<a href="#Low1"><h4 class="search-results-title">قوانین کنسلی بلیط قطار وحقوق مسافر </h4></a> 
<a href="#Low2"><h4 class="search-results-title">جدول میزان خسارت تاخیر به مسافران قطار </h4></a> 
<a href="#Low3"><h4 class="search-results-title"> شرایط و قوانین کرایه خودرو</h4></a> 

<div id="low1">11111111111</div> 
<div id="low2">22222222222222</div> 
<div id="low3">33333333333</div> 






$('[href^=#Low]').click(function() { 
      var hrefAttr = $(this).attr('href').toString().substr(1); 
      $('[id^=low]').addClass('hidden'); 
      setTimeout(function() { 
       $('#' + hrefAttr + '').removeClass('hidden'); 
       }, 2000); 
      }); 
+1

與其保持一致的資本。鏈接的'href'值使用大寫'L',而div元素使用小寫'l'。 – SimianAngel

+0

我改變這個,但不工作 – programmer138200

+0

'然後只顯示其中之一.'..平均值是什麼? –

回答

2

您可以使用.slice()在對應於隱藏#low元素#Low元素的最後一個字符位置檢索數

var low = $("[id^=low]").addClass("hidden"); // hide `#low` elements 
 
$("[href^=#Low]").click(function() { 
 
    var hrefAttr = this.href.slice(-1); // store number at end of `href` 
 
    low.addClass("hidden"); // hide displayed `#low` element 
 
    setTimeout(function() { 
 
    // show `#low` element where number at end of `href` is `hrefAttr` 
 
    $("[id=low" + hrefAttr + "]").removeClass("hidden"); 
 
    }, 2000); 
 
});
.hidden { 
 
    display:none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a href="#Low1"><h4 class="search-results-title">قوانین کنسلی بلیط قطار وحقوق مسافر </h4></a> 
 
<a href="#Low2"><h4 class="search-results-title">جدول میزان خسارت تاخیر به مسافران قطار </h4></a> 
 
<a href="#Low3"><h4 class="search-results-title"> شرایط و قوانین کرایه خودرو</h4></a> 
 

 
<div id="low1">11111111111</div> 
 
<div id="low2">22222222222222</div> 
 
<div id="low3">33333333333</div>