Javascript 初学者：jQuery“切换”问题
大家好，
我是一个名副其实的 JS 初学者，因此我一直在使用一些简单的 jQuery 来帮助我实现我想要的效果。一切都很顺利，直到我尝试实现 jQuery 切换效果。我希望代码适用于多个元素，因此我试图精简它并使其通用，而不是为每个切换选项卡编写一行。
我似乎无法让它发挥作用！
Head w/ javascript:
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content div[id^=toggle]').hide();
$('[class^=info]').click(function() {
var x = $(this).attr("idName");
$('#toggle_' + x).toggle();
return false;
});
});
</script>
</head>
Body：
<div id="content">
<div class="info_tab" id="info_grover">
<img src="images/pgrover_120x137.jpg" alt="Philip Grover" />
<h1>Philip Grover</h1><br />
<p>Info about Philip Grover</p>
</div>
<div id="toggle_info_grover">
</div>
<div class="info_tab" id="info_lewis">
<img src="images/rlewis_120x137.jpg" alt="Roy Lewis" />
<h1>Roy Lewis</h1><br />
<p>Info about Roy Lewis</p>
</div>
<div id="toggle_info_lewis">
</div>
</div>
我知道答案可能非常简单，我怀疑这与我使用“this”关键字有关，但经过一个小时的搜索，我似乎找不到为我的具体场景解决这个问题。我真的很感激任何建议。
预先感谢，
里奇
HI All,
I'm a veritable JS beginner and thus I've been using some simple bits of jQuery to help give me the effects I want. All has been going well until I tried to implement a jQuery toggle effect. I want the code to apply to multiple elements and so I'm trying to slim it down and make it generic rather than writing a line for each toggle tab.
I just can't seem to get it to work!
Head w/ javascript:
<head>
<title>My Title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#content div[id^=toggle]').hide();
$('[class^=info]').click(function() {
var x = $(this).attr("idName");
$('#toggle_' + x).toggle();
return false;
});
});
</script>
</head>
Body:
<div id="content">
<div class="info_tab" id="info_grover">
<img src="images/pgrover_120x137.jpg" alt="Philip Grover" />
<h1>Philip Grover</h1><br />
<p>Info about Philip Grover</p>
</div>
<div id="toggle_info_grover">
</div>
<div class="info_tab" id="info_lewis">
<img src="images/rlewis_120x137.jpg" alt="Roy Lewis" />
<h1>Roy Lewis</h1><br />
<p>Info about Roy Lewis</p>
</div>
<div id="toggle_info_lewis">
</div>
</div>
I know the answer is probably extremely simple and I suspect it has something to do with my usage of the "this" keyword but after an hour of searching I can't seem to work it out for my specific scenario. I'd really appreciate any advice.
Thanks in advance,
Rich
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的代码正在寻找名为“idName”的属性，但您的 HTML 元素都没有该属性。我想你只想要“id”。
或者，更简单地说，
Your code is looking for an attribute called "idName", and yet none of your HTML elements have that attribute. I think you want just "id".
or, more simply,
顺便说一句，这很复杂。如果您的“toggler”始终是下一个元素，那么您最好使用可点击元素的“toggler”之类的类（没有其他，没有ID，什么都没有）并使用：
This is complicated, by the way. If your "toggler" is always the next element, you'd better use a class like "toggler" of the clickable element (nothing else, no IDs, no nothing) and use: