带有 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 中使用唯一的 id，但在这种情况下您不需要将事件绑定到特定的 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 中，使用 class 选择器：

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，当您 mouseover/out 时，它会找到第一个 div class 包含 showOrNo .你可以在这里看到结果：http://jsfiddle.net/7qx5ge9m/1/

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

Django for loop list with jquery and javascript

html

javascript

django

jquery

django-templates