2016-05-14 47 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>