javascript - Django for 循环列表与 jquery 和 javascript

Question

问题:我只想显示 <li> 的结果元素，但不适用于所有元素。

如果您有任何疑问，请询问。

Javascript:

function func1(i){
  $('el[i] ~ span#showOrNo').css({'display':''}); //doesn't work
  //$('span#showOrNo').css({'display':''}); this works, but displays all elements
}

function func2(i){
  $('el[i] ~ span#showOrNo').css({'display':'none'});
  //$('span#showOrNo').css({'display':'none'});
}

var el = $('li');
for(var i = 0; i < el.length; i++){
  el[i].addEventListener('mouseover', function(){
    func1(i);
  }, false);
  el[i].addEventListener('mouseout', function(){
    func2(i);
  }, false);
}

HTML:

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

Answer 1

您必须在 HTML 中使用唯一的 id，但在这种情况下，您不需要将事件绑定(bind)到特定的 ID。试试这个:

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>

在你的 JS 中，使用类选择器:

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

这将绑定(bind) HTML 文档中的每个 li ，当您将鼠标悬停/移出时，它将找到第一个 div ，其 class 包含显示或编号您可以在此处查看结果:http://jsfiddle.net/7qx5ge9m/1/