Question

我希望隐藏使用此选择器$('[href^=#Low]')选择的所有元素，然后仅显示其中一个元素。我使用此代码但不起作用。

如何解决这个问题？

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);
            });

Answer 1

您可以使用.slice()检索#Low元素的最后一个字符位置的数字，该元素对应于隐藏的#low元素

＆＃13;

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);
});

＆＃13;

.hidden {
  display:none;
}

＆＃13;

<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>

＆＃13;

用jquery隐藏数字元素，然后显示它

1 个答案: