jquery隐藏多个div类，并将ID追加到末尾。
我有多个作为div的部分，每个部分都有一个数字附加到id的末尾(id=“节-‘.$节.’”)。可能会有很多这样的情况，而id每次都会增加。
我正在尝试编写一个jquery脚本来显示和隐藏正确的id=“资源-‘.$节.”。当用户单击div节中的img时，它将显示隐藏适当的资源div并隐藏所有其他资源div。
<div id="section-'.$section.'">
<img src="" id="section-img-'.$section.'"/>
</div>
<div id="resource-'.$section.'"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#resource").hide();
jQuery("#section img").click(function()
{
jQuery(this).next("#resource").show();
});
});
</script>任何想法或帮助都将不胜感激。提前谢谢。
修改：
<div class="section" id="section-'.$section.'">
<img src="" class="section-img" id="section-img-'.$section.'"/>
</div>
<div class="resource" id="resource-'.$section.'"></div>回答 5
Stack Overflow用户
发布于 2012-07-11 09:56:00
已更新
jQuery(document).ready(function() {
jQuery('.resource').hide();
jQuery('.section-img').click(function() {
jQuery('.resource').hide(); //hide others
//parse id for index
var idx = jQuery(this).attr("id").split('-')[2];
jQuery('#resource-'+idx).show(); //show this
});
});class不是id。它们是两个完全不同的html属性；类不一定是唯一的--事实上，您的jQuery类选择器依赖于它们不是唯一的。
<div id="section-1" class="section" >
<img src="" id="section-img-1" class="section-img" />
</div>
<div id="resource-1" class="resource"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('div[id^="resource"]').hide();
jQuery('div[id^="section-img"]').click(function()
{
jQuery(this).parent().next('div[id^="resource"]').show();
});
});
</script>注意:如果您决定以前的类名结构是必要的(无论出于什么原因)，那么您将无法使用类选择器--您必须使用属性开始--使用选择器。
如果您分配元素is以及一个类来指示它是什么类型的元素，那就更好了。第一部分是<div id="section-1" class="section"></div>。然后，您可以使用一个简单的类选择器同时选择所有的section，或者使用它的id执行特定于某个类的操作。
Stack Overflow用户
发布于 2012-07-11 10:01:20
我建议您遵循以下场景:将所有部分放在div#sections中，资源放在div#resources中，然后获取单击图像的父级索引，然后显示具有此索引的资源。
您的代码可能如下所示：
<div id="sections">
<div class="section">
<img src="" class="section-img"/>
</div>
...
</div>
<div id="resources">
<div class="resource"></div>
....
</div>
<script>
$(document).ready(function(){ $('.section-img').click(function(){ var index = $(this).parent().index(); $('.resource').hide().filter(':eq('+index+')').show() }) })
</script>Stack Overflow用户
发布于 2012-07-11 10:01:56
1)当前的.resource和.section选择器将失败，因为没有那些类的元素--正如您所说的，类是.section-4，而不仅仅是.section。
2) next()命令将失败，因为它是从img标记的上下文中运行的，但实际上.resource DIV是父.section DIV的同级
将类名协调为通用的，如果确实需要唯一的ID，则使用id属性。所以，HTML：
<!-- classes generalised; add in unique IDs as required -->
<div class="section">
<img src="" class="section-img" />
</div>
<div class="resource"></div>在那里，类名是一致的，而不是唯一的。这使得JS部分更加简单。
jQuery(".resource").hide();
jQuery(".section img").click(function() {
jQuery(this).parent().next(".resource").show(); //<-- note, parent()
});https://stackoverflow.com/questions/11429980
复制相似问题
腾讯云开发者
