当所有人都具有相同的班级时，如何隐藏/显示跨度？答案

【问题标题】：How can I Hide/Show a span when all of them have the same class?当所有人都具有相同的班级时，如何隐藏/显示跨度？
【发布时间】：2011-11-09 15:51:03
【问题描述】：

我有这个 HTML 代码：

<p>Hello <span class="hide" style="display:none">there</span> jquery</p>
<button class="toggle">Toggle</button>
<p>Hello <span class="hide" style="display:none">You</span> jquery</p>
<button class="toggle">Toggle</button>

使用这个 jQuery：

$('.toggle').toggle(
    function() {
        $('.hide').show("slow");},
    function() {    
        $('.hide').hide("slow");}
);

现在，您可以看到两个按钮具有相同的类，并且两个跨度具有相同的类。我在这里想要实现的是，当我按下其中一个时，它应该隐藏/显示其上方的跨度。

我已经让它在这个 jsFiddle 上以现在的方式运行

有什么想法吗？

提前致谢

费德里科

【问题讨论】：

标签： jquery toggle show-hide

【解决方案1】：

也许

$('button.toggle').click(function() {
    $(this).prev('span').toggle();
});

【讨论】：

【解决方案2】：

这应该可以解决问题：

$('.toggle').toggle(
    function() {
        $(this).prev().find('.hide').show("slow");},
    function() {    
        $(this).prev().find('.hide').hide("slow");}
);

【讨论】：

【解决方案3】：

将 span 的 id 属性设置为唯一值，然后使用 $('#thatid') 引用它（将 thatid 替换为您设置的 ID）。

【讨论】：

【解决方案4】：

$('.toggle').toggle(
    function() {
        $(this).prev().show('slow');
    },
    function() {
        $(this).prev().hide('slow');
    }
);

【讨论】：

【解决方案5】：

感谢大家的回答，我刚刚找到了另一种更适合我需要的方法！ :)

这是我发现可能对其他人有帮助的代码。

// Andy Langton's show/hide/mini-accordion - updated 23/11/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

然后在这个表单中简单地使用 HTML

<a href="#" class="toggleLink">Toggle</a>
<span class="toggle" >there</span>
<a href="#" class="toggleLink">Toggle</a>
<span class="toggle" >You</span>

将类切换添加到您想要隐藏/显示的任何跨度、div 或标签，并将类切换链接添加到父元素

你可以在这里看到它正在运行jsFiddle

或者在作者的网站上

【讨论】：