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

How do I use a function argument for this jquery code, or is there a better solution?

本文关键字：或者是 或者 是否 解决方案 更好 参数 函数 jquery 代码      更新时间：2023-09-26

我有大约 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，或者如何使用数组完成此实现。有人可以指出我正确的方向吗？我认为我们应该使用一个函数并传递那个 no。作为参数，但我不知道如何在 jquery 中使用自定义函数。

更新：

这就是我所做的

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

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

我会为所有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();
  });
});

正如杰森所说，

使用这个 

$('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....在帕拉格拉类;)

更新

看到这个小提琴

请注意，我们可以根据需要在<p>和<div>之间<br>标签。

假设您的 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();
});

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

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 的所有元素在单击时将显示其主要子元素，并隐藏所有其他子元素。

相关文章：