通過比較實體元素，並顯示正確的

我有這個名單與申報單和下拉菜單。帶有div的列表和下拉菜單div具有相同的數據屬性（data-num）。當單擊下拉菜單中的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>

來源

2016-06-22 J. Sveum

請你也加入您的HTML？或部分工作的代碼片段將非常棒。 – vijayP

這肯定可以簡化，但更容易，如果您發佈有關HTML標記。在這裏你的邏輯是錯誤的，因爲你將它設置單擊處理之外 –

@vijayP做:)） –

我猜你正在尋找這一點。

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

    });

來源

2016-06-22 12:12:09

完美！謝謝：） –

我猜你的HTML結構，但基於它是什麼樣子，你正在做的，您可以將您單擊處理程序添加到所有「麗「元素，並在該處理程序，只要找到匹配的項目顯示，然後隱藏它的兄弟姐妹。

$('#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會有所幫助。

來源

2016-06-22 12:10:16 mcgraphix

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

在這裏，我們都躲在所有div上document準備，然後就liclick我們抓住它data-num，然後尋找相關div顯示它。

$(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>

來源

2016-06-22 12:18:27 vijayP

通過比較實體元素，並顯示正確的

回答

相關問題