当使用jquery点击选择器时交换图像

我有一个常见问题解答，并且希望在问题的右侧附加一个图像，告诉人员如果关闭，则关闭。当使用jquery点击选择器时交换图像

这是我有：

$('.header-person').click(function() { 
    $(this).next('.entry').slideToggle("fast") 
    return false; 
});

我现在有两个图像旁边的问题，像这样：

question 1&nbsp;&nbsp; 

<span class="icon"><img src="open.png" width="16" height="16" border="0" /></span> 


<span style="display:none;" id="icon-delete"><img src="close-32.png" width="16" height="16" border="0" /></span>

谢谢！

来源

2010-10-19 TikaL13

无需将图像包裹在跨度中。您可以直接将每个图像的类放在它上面，并以此方式切换。此外，您可能需要注意.next()的功能，因为它可能不适用于您期望的功能。它只抓住立即下一个兄弟姐妹。这意味着，如果你打电话给它的那个元素和你正在寻找的元素之间有兄弟姐妹，你就不会找到它。

退房的文档.next()：http://api.jquery.com/next/

而是尝试使用.nextAll()带有过滤器选择找到你想要的元素。

的文档.nextAll()：http://api.jquery.com/nextAll/

话虽这么说，这里有一个演示，你想要做什么（我想）：http://jsfiddle.net/Ender/9eXnW/1/

基本上你想要做的就是确保你有能见度什么将每个图像设置为正确的开头，然后选择它们并在您的点击事件中调用.toggle()。

退房代码：

$(function() { 
    $('.entry').hide(); 
    $('.header-person').click(function(e) { 
     e.preventDefault(); 
     $(this).nextAll('.entry:first').slideToggle("fast"); 
     $(this).children('.close-icon, .open-icon').toggle(); 
    }); 
});

此外，我已经改变了你的return false;到e.preventDefault()

来源

2010-10-19 23:44:17 Ender

$（本）.nextAll（”关闭图标：第一，。开图标：第一“）.toggle（）; 这对我不起作用......没有任何事情发生在图标 – TikaL13 2010-10-20 14:22:22

Referral 1

– TikaL13 2010-10-20 14:23:43

啊，我明白了。你的HTML与我预期的有点不同。看到我更新的答案。 – Ender 2010-10-20 15:12:54

请输入完整的代码，以便我们看到我们可以使用哪些选择器。

但基本上，它看起来像所有你需要做的是这样的：

$(selectorforopen).toggle(); 
$(selectorforclosed).toggle();

这基本上表明，如果它是隐藏的，如果它不显示隐藏。

来源

2010-10-19 23:30:32

当使用jquery点击选择器时交换图像

回答

相关问题