使jquery切换与动态内容一起工作
Make jquery toggle work with dynamic content
我的网站上有以下代码:http://jsfiddle.net/dJLK3/1/正如你所看到的,它运行得很好。
问题是:那些div和链接触发器来自数据库。今天我有1,明天可能是10…
我不知道如何转换它并使其工作,而不需要纠正很多代码,如链接1,链接2,链接3,链接4,链接5等等…
有人吗?:)
使用data
属性和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>
js
$('.menu').on('click', '.link', function(){
var id = $(this).data('slideContent');
$('.slide').not('#' + id).slideUp(function() {
$('#' + id).slideToggle();
});
});
css
.slide {
display: none;
height: 100px;
width: 100px;
position: fixed;
top: 30px;
}
演示
参考文献:
- 向上滑动-http://api.jquery.com/slideUp/
- 滑动切换-http://api.jquery.com/slideToggle/
更新
这里有一个可能的答案-fiddle-更新-有新的要求
此处张贴的代码用于澄清
<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>
$(document).ready(function() {
$('#link_collection').on('click', '.link', function() {
var divCollection = $('#div_collection .div'),
index = $(this).index(), hasClickedMeAgain,
current = divCollection.filter('.current');
hasClickedMeAgain = current.index() === index;
if (hasClickedMeAgain){
current.slideToggle();
return false;
}
current.slideUp(function() {
$(this).removeClass('current');
divCollection.eq(index).addClass('current').slideToggle();
});
})
});
这样,你就不需要对任何东西进行标记。只需继续按照div和链接到达的顺序插入它们,然后代码就会自行处理。一切顺利。
这对你有用吗?对所有类使用相同的类属性。在document.ready()上有以下代码来分配点击事件:
HTML:
<a class="ui-link-option">Link 1</a>
<a class="ui-link-option">Link 2</a>
<div class="ui-link-option-text">Text Here 1</div>
<div class="ui-link-option-text">Text Here 2</div>
Javascript:
$("a.ui-link-option").each(
function (index) {
var $this = $(this);
$this.data("index", index);
$this.bind("click", function(e) {
var $this = $(this);
var linkIndex = $this.data("index");
$("div.ui-link-option-text").each(
function (index) {
if (index == linkIndex) {
$(this).slideToggle();
} else {
$(this).hide();
}
}
);
});
}
);
相关文章:
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- document.title函数可以't设置它与php一起工作
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 非常简单的js测试;Don’不要和Minko一起工作
- 无法使我的文本参数与我的查询一起工作
- 为什么Angularjs验证don't与输入[type=“number”]一起工作
- 无法使vash 0.8.0与express 4.12.3一起工作
- 如何使Angular JS控制器与指令一起工作
- 无法使autocompletion与bootstrap和php代码点火器一起工作
- 注入的元素和jQuery脚本.如何让他们一起工作
- 两个独立工作的javascript函数,但不能一起工作
- 角度和砖石一起工作
- Node http-proxy-middleware 不能与本地服务器一起工作
- jQuery脚本不想一起工作
- page.js使examples/hash与hashbang:true一起工作
- javascript使jquery倒计时与UTC时间一起工作
- jQuery.not()选择器无法与类一起工作
- Rails3-可排序列表不能与wysihtml5一起工作
- 替换匹配函数给出了未定义的错误,但它与替换一起工作
- 按钮上的数据加载消息无法与ajax调用一起工作