Question

我有这个列表，包含div和下拉菜单。带有div的列表和下拉菜单div具有相同的数据属性（data-num）。当单击下拉菜单中的div时，我想显示具有相同数据属性的div并隐藏其他div。我试过这样的事情，但它只给了我列表中的第一个div：

$('#chooseAnnexDropdown ul li').each(function(){
    var that = $(this);
    var sibs = $(this).siblings();
    var thisAttr = $(this).attr('data-num');
    var thisParent = $(this).parent().parent().parent().parent();

    var theProducts = thisParent.find('.theProduct');
    var theProductsAttr = $(theProducts).attr('data-num');
    console.log(theProductsAttr);

    that.click(function(){
        if ( thisAttr === theProductsAttr ) {
            // show the product div with the correct attribute and hide the others
        }
    });
});

那么我如何遍历下拉列表中的每个元素，然后将其与我的其他列表进行比较并显示正确的div？

以下是一些HTML代码：

<div id="configurator">
<!-- dropdown menu -->
<div id="chooseAnnexDropdown" class="confDropdown">
    <ul>
        <li class="block_2" data-num="block_2">Atelier</li>
        <li class="block_3" data-num="block_3">Bryggerhus</li>
        <li class="block_4" data-num="block_4">Smørebod</li>
        <li class="block_5" data-num="block_5">Bakstehus</li>
        <li class="block_6" data-num="block_6">Sportsrom</li>
        <li class="block_7" data-num="block_7">Boenhet</li>
        <li class="block_8" data-num="block_8">Ingen</li>
    </ul>
</div>  
<!-- end dropdown menu -->

{% for i in 1..39 %}
    {% for block in entry['hyttekonf'  ~i] %}
        <div class="theProduct" data-num="block_{{ i }}" id="block_{{ i }}">
            <div class="conf-image absolutecenter">
                {% set image = block.bilde.first() %}
                <img src="{{ image.getUrl('plantegningKonfigurator') }}" alt="{{ image.title }}" />
            </div>                            
        </div>
    {% endfor %}   
{% endfor %}
</div>

Answer 1

我猜你的HTML结构，但根据你的样子，你可以将你的点击处理程序添加到所有的＆＃34; li＆＃34;元素和那个处理程序，只需找到要显示的匹配项，然后隐藏它的兄弟姐妹。

 $('#chooseAnnexDropdown ul li').click(function(){
      var dataNum = $(this).attr('data-num');
      //this could be done in a better way
      var thisParent = $(this).parent().parent().parent().parent();
      thisParent.find('.theProduct[data-num=' + dataNum + ']').show().siblings().hide();

  });

查看实际的HTML会有所帮助。

Answer 2

我猜你正在寻找这个。

$('#chooseAnnexDropdown ul li').click(function(){
             var thisParent = $(this).parent().parent().parent().parent();
             thisParent.find('.theProduct[data-num=' + $(this).attr('data-num') + ']').show().siblings().hide();

  });

Answer 3

您可以按如下方式修改JS代码：

我们正在隐藏所有div document已准备就绪，然后click li我们抓住data-num，然后找到相关的div {1}}展示它。

$(document).ready(function() {

  $(".theProduct").hide(); //hide all div first

  $('#chooseAnnexDropdown ul li').click(function() {
    var thisAttr = $(this).attr('data-num');
    
    $(".theProduct").hide(); //hide all div first

    $("div[data-num='" + thisAttr + "']").show(); //show the matching div
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- dropdown menu -->
<div id="chooseAnnexDropdown" class="confDropdown">
  <ul>
    <li class="block_2" data-num="block_2">Atelier</li>
    <li class="block_3" data-num="block_3">Bryggerhus</li>
    <li class="block_4" data-num="block_4">Smørebod</li>
    <li class="block_5" data-num="block_5">Bakstehus</li>
    <li class="block_6" data-num="block_6">Sportsrom</li>
    <li class="block_7" data-num="block_7">Boenhet</li>
    <li class="block_8" data-num="block_8">Ingen</li>
  </ul>
</div>
<!-- end dropdown menu -->
<div class="theProduct" data-num="block_2" id="block_2">Atediver</div>
<div class="theProduct" data-num="block_3" id="block_3 ">Bryggerhus</div>
<div class="theProduct " data-num="block_4" id="block_4">Smørebod</div>
<div class="theProduct " data-num="block_5" id="block_5">Bakstehus</div>
<div class="theProduct " data-num="block_6" id="block_6">Sportsrom</div>
<div class="theProduct " data-num="block_7" id="block_7">Boenhet</div>
<div class="theProduct " data-num="block_8" id="block_8">Ingen</div>

按属性比较元素并显示正确的元素

3 个答案: