0

我有多个部分作为 div，每个部分都在 id(id="section-'.$section.'") 的末尾附加了一个数字。可能有很多，并且 id 每次都会增加。

我正在尝试编写一个 jquery 脚本来显示和隐藏正确的 id="resource-'.$section.'"。当用户单击部分 div 内的 img 时，它将显示隐藏适当的资源 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

4

5 回答 5

2

更新

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
    });
});​

Aclass不是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>​​​​​​

请注意，如果您认为之前的类名结构是必要的（无论出于何种原因），那么您将无法使用类选择器——您将不得不使用属性以选择器开始。

如果您分配元素 id 以及指示它是哪种元素的类，那会更好。例如，第一部分将是<div id="section-1" class="section"></div>。然后，您可以使用简单的类选择器一次选择所有sections，或者使用其 id 执行特定于某个类的操作。

于 2012-07-11T09:56:00.433 回答
1

我建议您遵循以下方案：将所有部分放在 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>
于 2012-07-11T10:01:20.357 回答
1

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

2）该next()命令将失败，因为它是从img标签的上下文中运行的，但实际上.resourceDIV 是父.sectionDIV的兄弟

将您的类名统一为通用名称，如果确实需要唯一的 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()
});
于 2012-07-11T10:01:56.580 回答
1

首先，如果类名将根据数字而变化，则必须将其分配给 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");
    });
于 2012-07-11T10:04:52.697 回答
1

每次点击图片时，都需要从类中解析它的编号，然后用资源类找到正确的 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();
 });

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

于 2012-07-11T10:07:37.497 回答