带有 jquery 和 javascript 的 Django for 循环列表

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 中使用唯一的 ids，但在这种情况下您不需要将您的事件绑定到特定的 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);

这将绑定您 HTML 文档中的每个 li，当您将鼠标悬停/移出时，它将找到第一个 div 和包含 showOrNo 的 class。你可以在这里看到结果：http://jsfiddle.net/7qx5ge9m/1/