Question

我有两个部分，在第一部分它应该只显示与第二部分相关的部分。我试图将第二组元素的ID与第一组元素的类进行比较。

$(document).ready(function() {
  
  $('.first-sub').hide();
  
  $('.second-sub a').click(function() {
    var id = $(this).attr('id');
    
    $(this).hasClass(id).show();
  });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="first-section">
  <div class="intro">
    <p>This is the intro section</p>
  </div>
  <div class="first-sub section-one">
    <p>This is section one</p>
  </div>
  <div class="first-sub section-two">
    <p>This is section two</p>
  </div>
  <div class="first-sub section-three">
    <p>This is section three</p>
  </div>
</div>

<div class="second-section">
  <div class="second-sub">
    <a href="#" id="section-one">Show Section One</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-two">Show Section One</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-two">Show Section One</a>
  </div>
</div>

Answer 1

你可以按照以下方式去做。

JS。

$(document).ready(function() {

   $('.first-sub').hide();

  $('.second-sub a').click(function() {
    var id = $(this).attr('id');

    $("div.first-section ."+id).show();
  });

});

HTML：

<div class="first-section">
  <div class="intro">
    <p>This is the intro section</p>
  </div>
  <div class="first-sub section-one">
    <p>This is section one</p>
  </div>
  <div class="first-sub section-two">
    <p>This is section two</p>
  </div>
  <div class="first-sub section-three">
    <p>This is section three</p>
  </div>
</div>

<div class="second-section">
  <div class="second-sub">
    <a href="#" id="section-one">Show Section One</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-two">Show Section two</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-three">Show Section three</a>
  </div>
</div>

以下是Plunker

Answer 2

没有hasId方法来检查元素是否具有id。请改用is()：

$(this).is(id).show();

但上述方法不起作用。因为是方法返回布尔值而你不能有方法。所以，你需要这样做：

if($(this).is(id)){
   $(this).show();
}

Answer 3

您可以使用.filter()按类过滤元素，hasClass()返回一个jQuery对象，因此调用.show()会产生错误。

$(document).ready(function() {

  var $subs = $('.first-sub').hide();

  $('.second-sub a').click(function() {
    $subs.filter('.' + this.id).show().siblings('.first-sub').hide();
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="first-section">
  <div class="intro">
    <p>This is the intro section</p>
  </div>
  <div class="first-sub section-one">
    <p>This is section one</p>
  </div>
  <div class="first-sub section-two">
    <p>This is section two</p>
  </div>
  <div class="first-sub section-three">
    <p>This is section three</p>
  </div>
</div>

<div class="second-section">
  <div class="second-sub">
    <a href="#" id="section-one">Show Section One</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-two">Show Section two</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-three">Show Section three</a>
  </div>
</div>

Answer 4

尝试在".first-section ." + this.id事件中使用click作为选择器来调用.show()，链接.siblings().hide()以隐藏所选元素的兄弟姐妹

$(document).ready(function() {
  
  $('.first-sub').hide();
  
  $('.second-sub a').click(function() {
    
    $(".first-section ." + this.id).show()
    .siblings().hide();
  });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="first-section">
  <div class="intro">
    <p>This is the intro section</p>
  </div>
  <div class="first-sub section-one">
    <p>This is section one</p>
  </div>
  <div class="first-sub section-two">
    <p>This is section two</p>
  </div>
  <div class="first-sub section-three">
    <p>This is section three</p>
  </div>
</div>

<div class="second-section">
  <div class="second-sub">
    <a href="#" id="section-one">Show Section One</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-two">Show Section Two</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-three">Show Section Three</a>
  </div>
</div>

Answer 5

的js

$(document).ready(function() { 
  $('.first-sub').hide();
  $('.second-sub a').click(function() {
    var id = $(this).attr('id');
      var element=".first-section .first-sub."+id+"";       
       $('.first-sub').hide();
      $(element).fadeIn("slow");
  });

});

HTML

<div class="first-section">
  <div class="intro">
    <p>This is the intro section</p>
  </div>
  <div class="first-sub section-one">
    <p>This is section one</p>
  </div>
  <div class="first-sub section-two">
    <p>This is section two</p>
  </div>
  <div class="first-sub section-three">
    <p>This is section three</p>
  </div>
</div>

<div class="second-section">
  <div class="second-sub">
    <a href="#" id="section-one">Show Section One</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-two">Show Section one</a>
  </div>
  <div class="second-sub">
    <a href="#" id="section-two">Show Section one</a>
  </div>
</div>

js Fiddle demo

隐藏/显示将ID与类进行比较的部分

5 个答案: