[英]foreach and hide/show multiple div
I have little problem with jQuery. 我对jQuery没什么问题。
I have multiple DIVs like this: 我有多个这样的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>
And here my jQuery code: 这是我的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();
});
}
}
}
I want when someone select USD, there only USD ID that will be showed, if I select EUR all <li>
with id=USD
will hide and display EUR <li>
... 我想当某人选择美元时,只有USD ID会显示,如果我选择EUR
id=USD
所有<li>
将隐藏并显示EUR <li>
...
But when I use this one, when I select EUR all <li>
of EUR will be hide, and same for USD. 但是,当我使用此货币时,当我选择EUR时,欧元的所有
<li>
都将被隐藏,而美元则相同。
Please help me to fix this problem, thank you. 请帮助我解决此问题,谢谢。
Make it more simple: 使它更简单:
<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>
Just hide all the items and show the current selection: 只需隐藏所有项目并显示当前选择即可:
function cal_sell() {
var currency = $('#currency').val();
$('#all li').hide();
$('#all li.'+currency).show();
}
Change this part of code: 更改这部分代码:
$('#all #'+currency).each(function(index, item){
$(item).hide();
});
by: 通过:
$('#all #'+key).each(function(index, item){
$(item).hide();
});
You just forgot to change currency
by key
variable in this part of code. 您只是忘了在代码的这一部分中通过
key
变量来更改currency
。
If you're using a select
it easier to do it this way. 如果您使用的是
select
则可以更轻松地执行此操作。 I've opted for data attributes instead of classes. 我选择了数据属性而不是类。
HTML 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 JS
$('select').on('change', function () {
var option = $('select option:selected').val();
$('li').show();
$('li[data-id!="' + option + '"]').hide();
});
First, you don't need a for each with a multiple jQuery selector. 首先,您不需要每个都具有多个jQuery选择器的。 You can use directly:
您可以直接使用:
$("#all #" + currency).hide() or show()
Second the each item value is already a jQuery wrapped DOM element, so you can use 其次,每个项目值已经是jQuery包装的DOM元素,因此您可以使用
item.show()
item.hide();
And finally you are showing and hiding the same element with the same class. 最后,您将显示和隐藏具有相同类的相同元素。 You need to use the not selector.
您需要使用not选择器。
So all will be: 因此,所有将是:
for (key in convert) {
if(key == currency) {
$('#all #'+currency).show()
} else {
$('#all li:not(#'+currency+')').hide();
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.