[Answer]-Django for loop list with jquery and javascript

by

1👍

✅

You have to use unique ids in your HTML but you don’t need to bind your event to a specific id in this case. Try this:

HTML:

<li>
<div>
  <span>{{ song.name }}-{{ song.artist }}</span>
  <div class="showOrNo" style='display:none'>
    {% if song.attr %}
    <span>{{ song.attr }}</span>
    {% else %}
    <span>{{ song.change }}</span>
    {% endif %}
  </div>
</div>

And in your JS, use a class selector:

function func1() {
    $(this).find('div.showOrNo').css({'display':''});
}

function func2() {
    $(this).find('div.showOrNo').css({'display':'none'});
}

$('li').on('mouseover', func1);
$('li').on('mouseout', func2);

This will bind every li in your HTML document and when you mouseover/out, it will find the first div with a class containing showOrNo. You can see the result here: http://jsfiddle.net/7qx5ge9m/1/

👤Selcuk

Leave a comment