Question

我对jQuery没什么问题。

我有多个像这样的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，如果我选择欧元<li>只有id=USD会隐藏并显示欧元<li> ...

但是当我使用这个时，当我选择EUR时，所有<li>的EUR都将被隐藏，而且相同的是USD。

请帮我解决这个问题，谢谢。

Answer 1

让它更简单：

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

只需隐藏所有项目并显示当前选择：

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

Answer 2

更改此部分代码：

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

由：

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

您忘记在此部分代码中更改currency key个变量。

Answer 3

如果你正在使用select，这样就更容易了。我选择了数据属性而不是类。

<强> 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>

<强> JS

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

Fiddle

Answer 4

首先，对于每个具有多个jQuery选择器的人，不需要a。您可以直接使用：

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

其次，每个项目值已经是jQuery包装的DOM元素，因此您可以使用

item.show()
item.hide();

最后，您将使用同一个类显示和隐藏相同的元素。您需要使用not selector。

所有人都将：

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

foreach和hide /显示多个div

4 个答案: