Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/75.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使jquery切换与动态内容一起工作_Javascript_Jquery - Fatal编程技术网

Javascript 使jquery切换与动态内容一起工作

Javascript 使jquery切换与动态内容一起工作,javascript,jquery,Javascript,Jquery,我的网站上有以下代码: 正如你所看到的,它工作得很好 问题是:这些div和link触发器来自数据库。今天我有1个,明天可能是10个 我不知道如何转换它,使其工作,而不需要正确的代码,如link1,link2,link3,link4,link5等很多 有人吗?:) 这对你有用吗?对所有类使用相同的类属性。并在document.ready()上具有以下代码以分配单击事件: HTML: 更新 这里有一个可能的答案- 代码张贴在这里澄清 <div id='link_collection'>

我的网站上有以下代码: 正如你所看到的,它工作得很好

问题是:这些div和link触发器来自数据库。今天我有1个,明天可能是10个

我不知道如何转换它,使其工作,而不需要正确的代码,如link1,link2,link3,link4,link5等很多


有人吗?:)

这对你有用吗?对所有类使用相同的类属性。并在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的(以及以何种格式)?嘿,谢谢您的帮助。我不能设置同一个类,因为它总是有两个div和两个触发器。看一看:尝试单击PROGRAMACAO和TEXTO Curatorial您仍然可以对所有锚定标记使用相同的类名,对所有div标记使用相同的类名。检查更新的代码。(假设每个a标记都有一个对应的div标记。)它不起作用…看看这里:它从不关闭,并且在两个divsTry之间切换更改颜色,为了您的利益,我添加了一些控制台语句,它工作得很好,但我的代码将有不止一个link_集合和div_集合…我的意思是,我将根据数据库中的数据量重复您的html代码。不管怎样,谢谢你在这件事上帮了我的忙!几乎…在切换下一个之前,你能让它滑到div上吗?通过这种方式,它关闭黄色然后以红色打开,或者关闭红色然后以黄色打开……明白了吗?:)
<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;
}