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

Posted 2023-02-24

【中文标题】带有 jquery 和 javascript 的 Django for 循环列表

【英文标题】：Django for loop list with jquery and javascript

【发布时间】：2015-04-18 15:20:49

【问题描述】：

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

【问题讨论】：

所以...您只想显示被点击的 LI...是这样吗？

你知道你对每个 li 使用相同的 id，不是吗？

@Selcuk 怎么样？我正在增加i。对不起，如果这是一个菜鸟问题。我刚开始用js。

@dylrei 我想为悬停在上面的 li 显示 div showOrNo。

【参考方案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/

【讨论】：

试过了。现在什么都没有发生。

现在工作。谢谢你。为胜利而战！