我如何在此jquery代码中使用函数参数，还是有更好的解决方案？
[英]How do I use a function argument for this jquery code, or is there a better solution?
问题描述
I have about 50 p tags and next to these are again 50 divs. 
我大约有50个p标签，这些标签旁边又是50个div。 on click of each p tag, its div should be shown and the rest hidden. 单击每个p标签时，应显示其div，其余的隐藏。 How do i acheive this. 我如何做到这一点。 I can use something like below: 我可以使用如下所示的内容：
$(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()
})
//////////////
//////
})
but as you see that this is not an effiecient solution. 但是正如您看到的那样，这不是有效的解决方案。 I am also not sure how the jquery each can be leveraged here or how can this implementation be done using arrays. 我也不知道如何jQuery的each都可以在这里利用或者怎么能这样实现使用数组来完成。 Can somebody point me in the right direction. 有人能指出我正确的方向吗？ I think we should use a function and pass that no. 我认为我们应该使用一个函数并将其传递给否。 as a parameter, but I dont know how to use custom functions in jquery. 作为参数，但我不知道如何在jquery中使用自定义函数。
UPDATE: 更新：
This is what I have done 这就是我所做的
$(function() {
$('.p1').click(function() {
$('.div').hide();
$('.d1').show();
})
})
I have added the class div to all of my 50 divs and I am showing d1 on click of p1. 我已将class div添加到所有50个div中，并且在单击p1时显示d1。 Now how do I replace 1 for each instance till 50. 现在如何在每个实例中替换1直到50。
5 个解决方案
解决方案1
4 已采纳 2012-05-17 17:31:48
I would have a common class to all div and p so that the binding the handler and the hide can be simple. 我将对所有div和p有一个通用的类，以便绑定处理程序和hide可以很简单。 And for the div, I would associate a data-tag to each p to link each p tag to div 对于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>
And the script would be, 脚本应该是
$(function() {
$('.pclass').click(function(){
$('.mydiv').hide();
$('.' + $(this).data('showdiv')).show();
});
});
解决方案2
1 2012-05-17 17:40:51
As Jason told, 正如Jason所说，
Use this 用这个
$('p').click(function() {
$('div').hide();
$(this).next('div').show();
});
If the div is next to each paragraph. 如果div在每个段落旁边。
But, if there's an element between p and div , it wont work. 但是，如果在p和div之间有一个元素，它将无法工作。
For you problem, you can do, 对于您的问题，您可以做到，
$('p').click(function() {
$('div').hide();
var divClass = $(this).attr("class").replace('p','div');
$('.' + divClass).show();
});
provided you have only p1 , p2 .... in paragrah classes ;) 只要您在paragrah类中只有p1 ， p2 ....;）
Update 更新
Notice , we have <br> tags between <p> and <div> as you wanted. 注意，您可以根据需要在<p>和<div>之间使用<br>标记。
解决方案3
0 2012-05-17 17:29:08
Assuming your HTML structure is 假设您的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>
....
Use the following in your $(function(){}); 在$(function(){});使用以下内容$(function(){}); method: 方法：
$('p').click(function() {
$('div').hide();
$(this).next('div').show();
});
解决方案4
0 2012-05-17 17:35:43
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();
});
解决方案5
0 2012-05-17 17:54:39
The jQuery click event will automatically be registered on all elements that match the selector, so you shouldn't have to use the each() method. jQuery click事件将自动在与选择器匹配的所有元素上注册，因此您不必使用each()方法。 I would suggest having two CSS classes to distinguish between elements that have this toggling behaviour and elements that are primary (ie should be shown when their parent is clicked). 我建议使用两个CSS类来区分具有这种切换行为的元素和主要元素（即，在单击其父元素时应显示的元素）。
The markup: 标记：
<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>
The code: 编码：
$(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.
});
});
In this example all elements with the class togglable will show their primary child element when clicked and hide all other child elements. 在此示例中，所有具有类别togglable元素在单击时都会显示其主要子元素，并隐藏所有其他子元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.