jQuery 切换显示/隐藏 w/多个 DIV ID
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2082218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Toggle Show/Hide w/Multiple DIV ID's
提问by flipflopmedia
CODE:
代码：
$(document).ready(function() {
$('.toggle').hide();
$('.show').click(function(){
$('.toggle').toggle('slow');
$(this).attr('src','images/checkmark2.jpg');
},function(){
$('.toggle').toggle('slow');
$(this).attr('src', 'images/checkmark1.jpg');
return false;
});
});
HTML:
HTML：
<img class="show" src="images/checkmark1.jpg"/>Header Text
Hidden Text is in a div class "toggle" to be seen when you click on the checkmark1.jpg image. With multiple "toggle" div classes, they all expand at once.
当您单击 checkmark1.jpg 图像时，隐藏文本位于 div 类“切换”中。使用多个“切换”div 类，它们都会同时展开。
When "toggle" is set to ID # in the Script and HTML, they expand independently (as how I would like), but you cannot use the same DIV ID # Name throughout. So how would i change the code to use multiple toggle DIV IDs; or use "toggle" classes that don't expand every one at once ???
当“切换”在脚本和 HTML 中设置为 ID # 时，它们会独立展开（如我所愿），但您不能始终使用相同的 DIV ID # 名称。那么我将如何更改代码以使用多个切换 DIV ID？或者使用不会一次扩展每个类的“切换”类？？？
HERE is a direct link to my code. http://www.flipflopmedia.com/test/ToggleTEST_html.txtWhen I try to insert it, it's being rendered and not displaying so that you can actually see it. Yes, I'm using the code button 'enter code here' to apply it, not working!
这里是我的代码的直接链接。 http://www.flipflopmedia.com/test/ToggleTEST_html.txt当我尝试插入它时，它正在呈现但没有显示，因此您可以实际看到它。是的，我正在使用代码按钮“在此处输入代码”来应用它，但不起作用！
回答by Mottie
Since you didn't provide any HTML to work from, I put some together with script that works
由于您没有提供任何可用的 HTML，我将一些与有效的脚本放在一起
HTML
HTML
<img class="show" src="images/checkmark1.jpg" /><span>Header Text 1</span>
<div class="toggle">This is some hidden text #1</div>
<img class="show" src="images/checkmark1.jpg" /><span>Header Text 2</span>
<div class="toggle">This is some hidden text #2</div>
Script (updated to work with your HTML)
脚本（已更新以使用您的 HTML）
$(document).ready(function(){
$('.toggle').hide();
$('.show').click(function(){
var t = $(this);
// toggle hidden div
t.next().next().toggle('slow', function(){
// determine which image to use if hidden div is hidden after the toggling is done
var imgsrc = ($(this).is(':hidden')) ? 'images/checkmark1.jpg' : 'images/checkmark2.jpg';
// update image src
t.attr('src', imgsrc );
});
})
})
回答by Ian Varley
The "click" function only allows you to add one function (the one that's fired when you click the selected element(s)). But you're passing it two. You probably want to use the "toggle" function instead. See this question for more info:
“点击”功能只允许您添加一个功能（当您点击所选元素时触发的功能）。但是你通过了它两个。您可能想改用“切换”功能。有关更多信息，请参阅此问题：
回答by Sampson
Use both an ID and a Class:
使用 ID 和类：
<p id="myP1" class="toggle">Hello World</p>
When you need to handle it specifically:
当您需要专门处理时：
$("#myP1").toggle();
When you want to handle it with the rest:
当你想和其他人一起处理它时：
$(".toggle").hide();
回答by nicerobot
You want be able to derive the id for the element(s) to toggle from the attributes of the element being clicked. In other words, based solely on the information contained within attributes the element being clicked, you can construct the id (and/or classes) for the element(s) to toggle.
您希望能够导出元素的 id，以从被单击的元素的属性中切换。换句话说，仅基于所单击元素的属性中包含的信息，您可以构造要切换的元素的 id（和/或类）。
Possibly correlate the id of the element with the onclick handler to the id of the element(s) you want to toggle. For example, if you click on an img with id="checkmark1" and make the element being toggled have id="checkmark1_content", then your click handler can be:
可能将元素的 id 与 onclick 处理程序关联到要切换的元素的 id。例如，如果您单击 id="checkmark1" 的 img 并使被切换的元素具有 id="checkmark1_content"，那么您的单击处理程序可以是：
$('#' + this.id + '_content').toggle();
Classes would be used for toggling more than one (or a few) elements:
类将用于切换多个（或几个）元素：
$('.' + this.id + '_content').toggle();
Based on the test-case provided in the comments below, here is the solution:
根据下面评论中提供的测试用例，这里是解决方案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Toggle Test
</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('.toggle').hide();
$('img').attr('src','images/checkmark1.jpg');
$('.toggler').click( function() {
var target = this.id + '_content';
// Use ID-selectors to toggle a single element.
$('#' + target).toggle();
// Use class-selectors to toggle groups of elements.
$('.' + target).toggle();
$('.toggle.always').toggle();
});
$('#toggle_everything').click( function() { $('.toggle').toggle(); });
});
//]]></script>
</head>
<body>
<div class="toggler" id="toggle1"><img/>Toggle 1</div>
<div class="toggler" id="toggle2"><img/>Toggle 2</div>
<div class="toggler" id="toggle3"><img/>Toggle 3</div>
<div id="toggle_everything"><img/>Toggle Everything</div>
<hr/>
<div class="toggle" id="toggle1_content">only toggle1</div>
<div class="toggle" id="toggle2_content">only toggle2</div>
<div class="toggle" id="toggle3_content">only toggle3</div>
<div class="toggle always">always toggled</div>
<div class="toggle toggle1_content toggle2_content">toggle1 and toggle2</div>
<div class="toggle toggle1_content toggle3_content">toggle1 and toggle3</div>
<div class="toggle toggle2_content toggle3_content">toggle2 and toggle3</div>
<div class="toggle toggle1_content toggle2_content toggle3_content">toggle1, toggle2 and toggle3</div>
</body>
</html>
回答by Mathias Bynens
The problem lies here:
问题出在这里：
$('.toggle').toggle('slow');
This piece of code will of course toggle all the HTML elements with class="toggle".
这段代码当然会用class="toggle".
Depending on your HTML structure, do something like this instead:
根据您的 HTML 结构，请改为执行以下操作：
$(function() {
$('.toggle').hide();
$('.show').click(function() {
$(this).next('.toggle').toggle('slow');
$(this).attr('src', 'images/checkmark2.jpg');
return false;
}, function() {
$(this).next('.toggle').toggle('slow');
$(this).attr('src', 'images/checkmark1.jpg');
return false;
});
});
