CODEWITHSUNDEEP
javascriptjquery
Mombay
Mombay

Reputation: 55

foreach and hide/show multiple div

I have little problem with jQuery.

I have multiple DIVs like this:

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

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

But when I use this one, when I select EUR all <li> of EUR will be hide, and same for USD.

Please help me to fix this problem, thank you.

Upvotes: 1

Views: 1692

Answers (4)

Mauro Valvano
Mauro Valvano

Reputation: 933

First, you don't need a for each with a multiple jQuery selector. 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

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.

So all will be:

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

Upvotes: 0

Andy
Andy

Reputation: 63550

If you're using a select it easier to do it this way. I've opted for data attributes instead of classes.

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

Upvotes: 0

Pirata21
Pirata21

Reputation: 449

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();
}

Upvotes: 1

Zini
Zini

Reputation: 914

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.

Upvotes: 0

Related Questions