我有这个jquery代码:
<script type="text/javascript">
jQuery(document).ready(function($){
// hides the slickbox as soon as the DOM is ready
$('#slickbox').hide();
// shows the slickbox on clicking the noted link
$('#slick-show').click(function() {
$('#slickbox').show('slow');
return false;
});
// hides the slickbox on clicking the noted link
$('#slick-hide').click(function() {
$('#slickbox').hide('fast');
return false;
});
// toggles the slickbox on clicking the noted link
$('#slick-toggle').click(function() {
$('#slickbox').toggle(400);
return false;
});
});
</script>
问题是:如何让代码适用于同一div的多个实例?
就像这样,它适用于第一个for循环的div。
UPDATE:使用过的类,现在所有的div都被立即切换。我需要的是例如,如果我点击循环生成的第三个链接,只显示第三个slickbox。希望你理解。
<? for ($i = 1; $i <= get_option('category_nr'); $i++):
<table class="form-table">
<tr valign="top">
<td colspan="2"><a href="#" class="slick-toggle<? echo $i; ?>">Toggle the box</a></td>
</tr>
</table>
<div class="slickbox<? echo $i; ?>">
Content
</div>
<? endfor; ?>
谢谢!
答案 0 :(得分:1)
编辑:
现在每个链接都会切换一个div。 链接的id必须与div的类相同。
代码未经测试:
HTML:
<a href="#" class="toggle_link" id="toggle_1">link 1</a>
<div class="toggle_1">Box 1</div>
<a href="#" class="toggle_link" id="toggle_2">link 2</a>
<div class="toggle_2">Box 2</div>
jQuery的:
$('a.toggle_link').click(function(e) {
e.preventDefault();
$('.'+$(this).attr('id')).toggle();
});
答案 1 :(得分:0)
将点击绑定到类或其他属性而不是ID。
例如,我正在组建一个新的社区并对其进行约束。
$('div[rel="slickbox"]').hide();
<div rel="slickbox" id="slickbox">
我猜你有这个主意。
P.s:ID应该是唯一的,不要在循环上使用相同的ID,使它们唯一。
编辑:使用解决方案更新回复:
示例HTML:
<a class="click" id="id1" rel="1">Click me</a>
<a class="click" id="id2" rel="2">Or me</a>
<a class="click" id="id3" rel="3">Or to me</a>
<br /><br />
<div id="hidden1" class="hidden">First Hidden Div <button class="closeme">Close Me</button></div>
<div id="hidden2" class="hidden">Second Hidden Div <button class="closeme">Close Me</button></div>
<div id="hidden3" class="hidden">Third Hidden Div <button class="closeme">Close Me</button></div>
示例jQuery:
$(function(){
$('.click').click(function(){
if($('#hidden'+$(this).attr('rel')).is(':hidden')) {
$('#hidden'+$(this).attr('rel')).show('fast');
} else {
$('#hidden'+$(this).attr('rel')).hide('fast');
}
});
$('.closeme').click(function(){
$(this).parent('div').hide('fast');
});
});
我必须更新切换事件并在每次点击时检查其状态,因为关闭按钮是杀死切换顺序(我的意思是,单击here,打开div并关闭div内的关闭按钮,并且试着从主要的交换者那里重新打开。你会明白我的意思。)
示例CSS:
.click {
display:block;
cursor:pointer;
}
.hidden {
display:none; /*hide for default*/
background:red;
color: white;
}
您可以从here查看。您可以将任何链接与您想要的任何链接相关联。
答案 2 :(得分:0)
您不得生成多个相同的ID。创建一个空类“slickbox”并使用
<div id="slickbox_<?php print "$i"; ?>" class="slickbox">
然后jQuery选择“.slickbox”而不是“#slickbox”。
编辑:如果存在(例如在CSS中),还要通过id检查对“slickbox”的任何其他引用。
然后,click函数不能引用id或类,而是引用所单击的对象:
$('.slick-show').click(function() {
self.show('slow');
return false;
});
答案 3 :(得分:0)
我不确定你想要实现什么,但这似乎就是这样:
假设以下HTML:
<div id="actions">
<button id="slick-show">Show all</button>
<button id="slick-hide">Hide all</button>
</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>
<div class="slickbox">Hello</div>
<强>的jQuery 强>
jQuery(document).ready(function($){
// define the target element
var $target = $('.slickbox');
// hides all by default
$target.hide();
// shows all
$('#slick-show').bind("click", function(event) {
event.preventDefault();
$target.show('slow');
});
// hides all
$('#slick-hide').bind("click", function(event) {
event.preventDefault();
$target.hide('fast');
});
// toggles the clicked one
$target.bind("click", function(event) {
event.preventDefault();
$(this).toggle(400);
});
});