Question

我有大约50个p标签，其次是50个div。点击每个p标签，其div应显示，其余隐藏。我怎么做到这一点。我可以使用以下内容：

$(function() {
  $('.p1').click(function(){
  $('.div1').show();
  $('.div2','.div3','.div4','.div5','.div6',.........,'.div50').hide()
})
$('.p2').click(function(){
  $('.div2').show();
  $('.div1','.div3','.div4','.div5','.div6',.........,'.div50').hide()
})
//////////////
//////
})

但是你看到这不是一个有效的解决方案。我也不确定如何在这里利用jquery each或者如何使用数组来完成这个实现。有人能指出我正确的方向。我认为我们应该使用一个函数并传递不。作为参数，但我不知道如何在jquery中使用自定义函数。

更新

这就是我所做的

$(function() {
        $('.p1').click(function() {
            $('.div').hide();
            $('.d1').show();
        })
    })

我已经将所有50个div添加了类div，并且在点击p1时显示d1。现在，如何为每个实例替换1直到50。

Answer 1

我会为所有div和p设置一个公共类，以便处理程序和hide的绑定可以很简单。对于div，我会将数据标记与每个p相关联，以将每个p标记与div

相关联

<p class="p1 pclass" data-showdiv="div1">
 ...
</p>
<p class="p2 pclass" data-showdiv="div2">
..

<div class="mydiv div1" ..>
..
</div>
<div class="mydiv div2" ..>
..
</div>

脚本就是，

$(function() {
  $('.pclass').click(function(){
     $('.mydiv').hide();
     $('.' + $(this).data('showdiv')).show();
  });
});

Answer 2

正如杰森所说，

使用此

$('p').click(function() {
    $('div').hide();
    $(this).next('div').show();
});

如果div位于每个段落的旁边。

但是，如果p和div之间存在元素，则无效。

对于你的问题，你可以这样做，

$('p').click(function() {
        $('div').hide();
        var divClass = $(this).attr("class").replace('p','div');
        $('.' + divClass).show();
    });

如果你只有p1，p2 ....参加paragrah课程;）

<强>更新

See this fiddle

请注意，我们根据您的需要在<br>和<p>之间添加了<div>个标记。

Answer 3

假设您的HTML结构是

<p>Some text</p>
<div>More text to hide and show</div>
<p>Some text</p>
<div>More text to hide and show</div>
<p>Some text</p>
<div>More text to hide and show</div>
....

在$(function(){});方法中使用以下内容：

$('p').click(function() {
    $('div').hide();
    $(this).next('div').show();
});

Answer 4

var dvs = ['.div1','.div2','.div3','.div4','.div5','.div6',.........,'.div50'];

$('p').click(function() {
    var index = parseInt(this.className.replace('p','')) - 1;
    $(dvs[index]).show();
    $(dvs.join(', ')).not(dvs[index]).hide();
});

Answer 5

jQuery click事件将自动在与选择器匹配的所有元素上注册，因此您不必使用each()方法。我建议有两个CSS类来区分具有此切换行为的元素和主要元素（即应在单击其父元素时显示）。

标记：

<body>
  <p class="togglable">
    <div class="primary">
      This is the primary div that will be shown when our parent is clicked.
    </div>
    <div>Regular div child</div>
    <p>Nested paragraph</p>
    <ul>
      <li>A list perhaps</li>
    </ul>
  </p>

  <p class="togglable">
    <div class="primary">
      This is the primary div that will be shown when our parent is clicked.
    </div>
    <div>Regular div child</div>
    <p>Nested paragraph</p>
    <ul>
      <li>A list perhaps</li>
    </ul>
  </p>

  <p>This is a normal paragraph</p>
</body>

代码：

$(function () {
  $('.togglable').click(function () {
    // hide all our children
    $(this).children().hide();
    // now only show our primary chlid
    // NOTE: we pass 'this' as the second argument
    // so that the selector will only apply to the
    // children of the element that was clicked
    // (i.e. we are providing a custom context for the selector).
    $('.primary', this).show();     

    // You could even use the position of the child as well:
    // $(this).children().first().show();   
    // This will show the first child element.
  });
});

在此示例中，具有类togglable的所有元素将在单击时显示其主子元素并隐藏所有其他子元素。

如何为此jquery代码使用函数参数，还是有更好的解决方案？

5 个答案: