Question

我在这两个数组中使用nokogiri解析了HTML。我正在努力切换到我的观点，我只能显示第一个div内容。当我想通过按名为selectPeriodRangePanel链接显示名为period_select_range_btn的第二个div内容时，我总是先显示div内容。

@name= ['HTML','Links','Images','Code','Lists']
@content= ['Examples in Every Chapter',
      'Links is an open source text',
      'Browse through dozens of free flower images',
      'Code.org thanks its supporters',
      'If you loved Winston']

<% for i in 1..5 %>
    <div class="container">
        <div class="row">
            <div class="col">
                <%= @name[i] %>
                <a id="period_select_range_btn">Show Tag</a>
            </div>
            <div id="selectPeriodRangePanel" style="display:none">
                <div class="col">           
                    <div><%= @content[i]%></div>
                </div>
            </div>      
        </div>
    </div>
<% end %>

<script type="text/javascript">
   $(document).on("click", function(e) {
       var el = $(e.target).closest("#selectPeriodRangePanel, #period_select_range_btn").length != 0;
       $("#selectPeriodRangePanel"+ id).toggle(el);
    });
</script>

Answer 1

在HTML中，拥有多个具有相同ID的元素是无效的，而浏览器不会阻止您这样做，JavaScript和jQuery都只能识别具有ID的第一个元素。。。所有其他人都将被忽略。

如评论中所述，如果您需要将元素组合在一起，则通用类是处理它的更好方法。。。保持ID唯一。

将具有相同ID名称的Div切换到循环中

1 个答案: