Question

我从jquery开始，我对我正在做的一些练习有疑问。

我有这个HTML代码：

<div id="caja">
  <div id="botones">
      <button class="content1">1</button>
      <button class="content2">2</button>
      <button class="content3">3</button>
      <button class="content4">4</button>
  </div>
  <div id="contenidos">
      <p class="content1">Contenido 1</p>
      <p class="content2">Contenido 2</p>
      <p class="content3">Contenido 3</p>
      <p class="content4">Contenido 4</p>
  </div>
</div>

和这个jquery代码：

$('#contenidos').find('p').hide();

$('#botones').find('button').on('click' , function(){
    var claseb = $(this).attr('class');

  $(this).closest('#contenidos').find('p' , function(){
    $(this).attr('class').not(claseb).hide();
    $(this).hasClass(claseb).show();
  });


});

我的目的是当我点击任何按钮时，我只想显示适合此按钮的内容并隐藏其他按钮。我不知道jquery代码中的失败在哪里。

有jsfiddle：code

提前致谢。

Answer 1

您可以按照点击的p类选择button并显示p并隐藏这样的兄弟DEMO

$('#contenidos p').hide();

$('#botones button').on('click', function() {
  var claseb = $(this).attr('class');
  $('#contenidos .' + claseb).show().siblings().hide();
});

Answer 2

失败的部分是$(this).closest('#contenidos')。

.closest()遍历DOM寻找匹配项，并且由于事件是通过点击来自前一个兄弟的子项的按钮触发的，.closest()将无法找到它。

改为使用：

$('#botones button').on('click' , function(){
  var claseb = $(this).attr('class');
  $('#contenidos p').hide();
  $('#contenidos p.'+claseb).show();
});

<强> jsFiddle example

Jquery用事件显示或隐藏元素

2 个答案: