使用jquery和javascript的Django for循环列表

Django for loop list with jquery and javascript

本文关键字：for 循环 列表 Django jquery javascript 使用      更新时间：2023-12-15

问题：我只想显示一个<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>

您必须在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，其中class包含showOrNo。您可以在此处看到结果：http://jsfiddle.net/7qx5ge9m/1/

相关文章：