0

我有大约 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()
})
//////////////
//////
})

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

更新：

这就是我所做的

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

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

4

5 回答 5

4

我会对所有人都有一个通用的类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();
  });
});
于 2012-05-17T17:31:48.763 回答
1

正如杰森所说，

用这个

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

如果在div每个段落旁边。

但是，如果pand之间有一个元素div，它将不起作用。

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

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

前提是你只有p1, p2.... 在 paragrah 类;)

更新

看到这个小提琴

请注意，我们在和之间有您想要的<br>标签。<p><div>

于 2012-05-17T17:40:51.130 回答
0

假设您的 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();
});
于 2012-05-17T17:29:08.520 回答
0 
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();
});
于 2012-05-17T17:35:43.957 回答
0

jQueryclick事件将自动注册到与选择器匹配的所有元素上，因此您不必使用该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的元素将在单击时显示其主要子元素并隐藏所有其他子元素。

于 2012-05-17T17:54:39.893 回答