Javascript 使jquery切换与动态内容一起工作
我的网站上有以下代码: 正如你所看到的,它工作得很好 问题是:这些div和link触发器来自数据库。今天我有1个,明天可能是10个 我不知道如何转换它,使其工作,而不需要正确的代码,如link1,link2,link3,link4,link5等很多Javascript 使jquery切换与动态内容一起工作,javascript,jquery,Javascript,Jquery,我的网站上有以下代码: 正如你所看到的,它工作得很好 问题是:这些div和link触发器来自数据库。今天我有1个,明天可能是10个 我不知道如何转换它,使其工作,而不需要正确的代码,如link1,link2,link3,link4,link5等很多 有人吗?:) 这对你有用吗?对所有类使用相同的类属性。并在document.ready()上具有以下代码以分配单击事件: HTML: 更新 这里有一个可能的答案- 代码张贴在这里澄清 <div id='link_collection'>
有人吗?:) 这对你有用吗?对所有类使用相同的类属性。并在document.ready()上具有以下代码以分配单击事件: HTML:
更新 这里有一个可能的答案- 代码张贴在这里澄清
<div id='link_collection'>
<a href="#" class="link">Link1</a>
<a href="#" class="link">Link2</a>
</div>
<div id='div_collection'>
<div class='div current'></div>
<div class='div'></div>
</div>
这样,您就不需要对任何东西进行标记。只需按照它们到达的顺序插入div和link,代码就会自行处理。祝您一切顺利。使用
data
attr和jQuery.data
更新:
据评论称 html
<div class="menu">
<a href="#" class="link" data-slide-content="div1">Link1</a>
<a href="#" class="link" data-slide-content="div2">Link2</a>
</div>
<div id="div1" class="slide"></div>
<div id="div2" class="slide"></div>
css$('.menu').on('click', '.link', function(){
var id = $(this).data('slideContent');
$('.slide').not('#' + id).slideUp(function() {
$('#' + id).slideToggle();
});
});
.slide {
display: none;
height: 100px;
width: 100px;
position: fixed;
top: 30px;
}
参考资料:
- 幻灯片
- 滑动切换-
<div class="menu">
<a href="#" class="link" data-slide-content="div1">Link1</a>
<a href="#" class="link" data-slide-content="div2">Link2</a>
</div>
<div id="div1" class="slide"></div>
<div id="div2" class="slide"></div>
$('.menu').on('click', '.link', function(){
var id = $(this).data('slideContent');
$('.slide').not('#' + id).slideUp(function() {
$('#' + id).slideToggle();
});
});
.slide {
display: none;
height: 100px;
width: 100px;
position: fixed;
top: 30px;
}