Question

我有多个部分作为div，每个部分都有一个数字附加到id的末尾（id =“section - '。$ section。'”）。可能有很多这样的，每次都会增加id。

我正在尝试编写一个jquery脚本来显示和隐藏正确的id =“resource - '。$ section。'”。当用户点击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>

jsfiddle.net/kqQDH/1

Answer 1

已更新

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>

请注意，如果您确定您的类名的先前结构是必要的（无论出于何种原因），那么您将无法使用类选择器 - 您将不得不使用属性starts-with selector。

如果您分配了元素ID以及指示它是什么类型元素的类会更好。例如，第一部分是<div id="section-1" class="section"></div>。然后你可以用一个简单的类选择器一次选择所有section，或者使用它的id做一些特定的事情。

Answer 2

我建议您遵循以下方案：将所有部分放在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>

Answer 3

1）您当前的.resource和.section选择器会失败，因为没有正好具有这些类的元素 - 正如您所说，这些类例如.section-4，而不仅仅是{{} 1}}。

2）.section命令将失败，因为它是从next()标记的上下文运行的，但事实上img DIV是父.resource的兄弟姐妹DIV

协调您的班级名称是一般的，如果事情确实需要唯一ID，请使用.section属性。所以，HTML：

id

在那里，类名是一致的而不是唯一的。这使得JS部分更加简单。

<!-- classes generalised; add in unique IDs as required -->
<div class="section">
    <img src="" class="section-img" />
</div>
<div class="resource"></div>

Answer 4

首先，如果类名将根据数字而变化，则必须将其分配给div的ID。假设这是解决方案：

    $('img[id^="section-"]').click (function (e) {
  var temp_section = $(this).attr('id').replace('section-','');
      $('#resource-'+temp_section).show();
      $('div[id^="resource-"]').css("display","none");
    });

Answer 5

每次单击图像时，您需要从类中解析其编号，然后使用资源类找到正确的div：

jQuery(".section img").click(function()
 {
     //1.Hide all resources
     jQuery('div[class^="resource"]').hide();

     //2. parse number of resource to show   
     var number = parseInt($(this).attr('class').match(/(\d+)$/)[0], 10);
     var resourceClass = ".resource-" + number; 

     //3.find resource class and show it
     jQuery(resourceClass).show();
 });

我没有测试它，所以可能会有一些输入错误，但如果我明白你的意思，这就是你想要的方向。

jquery隐藏多个div类，ID附加到end

5 个答案: