foreach和hide /顯示多個div

我有多個div像這樣：

<input id="amount_sell" onkeyup="cal_sell()" value="" placeholder="Amount" type="text"> 

<div id="all"> 
    <ul> 
     <li id="USD">...</li> 
     <li id="USD">...</li> 
     <li id="USD">...</li> 
     <li id="EUR">...</li> 
     <li id="EUR">...</li> 
    </ul> 
</div>

而且這裏我jQuery代碼：

var convert = new Array(); 
convert["USD"] = 1; 
convert["EUR"] = 1.372; 

function cal_sell() { 
    var currency = $('#currency').val(); 

    for (key in convert) { 
     if(key == currency) { 
      $('#all #'+currency).each(function(index, item){  
       $(item).show(); 
      }); 
     } else { 
      $('#all #'+currency).each(function(index, item){  
       $(item).hide(); 
      }); 
     } 
    } 
}

我想，當有人選擇美元，也只有美元ID將被顯示，如果我選擇EUR所有<li>與id=USD將隱藏和顯示歐元<li> ...

但是，當我用這一個，當我選擇EUR所有0歐元的將隱藏起來，美元也是如此。

請幫我解決這個問題，謝謝。

來源

2014-04-03 Mombay

'id's意味着是唯一的。你的不是。 – Andy

同樣當我使用類...我正在尋找讓它工作的方式 – Mombay

你的代碼不完整，我們不能幫你這樣 – radia

變化的這部分代碼：

$('#all #'+currency).each(function(index, item){  
    $(item).hide(); 
    });

由：

$('#all #'+key).each(function(index, item){  
    $(item).hide(); 
    });

你忘記了通過key變量在這部分代碼改變currency。

來源

2014-04-03 16:10:00 Zini

我接受了答案:)我不能投票，我是新的:) – Mombay

使其更簡單：

<div id="all"> 
<ul> 
    <li class="USD">...</li> 
    <li class="USD">...</li> 
    <li class="USD">...</li> 
    <li class="EUR">...</li> 
    <li class="EUR">...</li> 
    </ul> 
</div>

只是隱藏的所有項目，並顯示當前選擇：如果您使用的是select更容易做這樣

function cal_sell() { 
    var currency = $('#currency').val(); 
    $('#all li').hide(); 
    $('#all li.'+currency).show(); 
}

來源

2014-04-03 16:14:41 Pirata21

。我選擇了數據屬性而不是類。

HTML

<li data-id="USD">USD</li> 
<li data-id="USD">USD</li> 
<li data-id="USD">USD</li> 
<li data-id="EUR">EUR</li> 
<li data-id="EUR">EUR</li>

$('select').on('change', function() { 
    var option = $('select option:selected').val(); 
    $('li').show(); 
    $('li[data-id!="' + option + '"]').hide(); 
});

Fiddle

來源

2014-04-03 16:16:53 Andy

首先，你不需要爲每個有多個jQuery選擇。您可以直接使用：

$("#all #" + currency).hide() or show()

其次每個項目值已經是一個jQuery包裹的DOM元素，所以你可以使用

item.show() 
item.hide();

最後你是顯示和相同的隱藏相同元素類。你需要使用不選擇器。

那麼一切都將是：

for (key in convert) { 
    if(key == currency) { 
     $('#all #'+currency).show() 
    } else { 
     $('#all li:not(#'+currency+')').hide(); 
    } 
}

來源

2014-04-03 16:29:23

foreach和hide /顯示多個div

回答

相關問題