ListView显示的模板上的JQuery，如何分别触发每个对象的播放？

Posted 2023-02-24

【中文标题】ListView显示的模板上的JQuery，如何分别触发每个对象的播放？

【英文标题】：JQuery on template which is displayed by ListView, How to Trigger play on each object separately?

【发布时间】：2015-02-05 09:47:51

【问题描述】：

我的模板

% for maingallery in gallery %

    <div id="frame">
    <h1 id="mainimagetitle"> maingallery.title </h1>
       <a href="% url 'gallery_detail' maingallery.id %"><img id="mainimage" src=" maingallery.main_image1.url "/></a>
    <p id="mainimagetext"> maingallery.text </p>




<audio id="jazzy">
  <source src=" maingallery.audio_file.url " type="audio/ogg" />
</audio>
        <script>
            $(document).ready(function() 

            $("#mainimage").mouseover(function()
            $(this).addClass('active').removeClass('notactive');
            if($(this).hasClass('active')) 
              $("#jazzy").addClass('active').removeClass('notactive');
            
            if ($("#jazzy").hasClass('active')) 
              $("#jazzy").trigger("play");
            

            );
            $("#mainimage").mouseleave(function()
            $(this).removeClass('active').addClass('notactive');
            if($(this).hasClass('notactive')) 
              $("#jazzy").addClass('notactive').removeClass('active');
            
            if ($("#jazzy").hasClass('notactive')) 
              $("#jazzy").trigger("pause");
            

            );
             );

        </script>
        </div>
% endfor %

   % block content %

   % endblock %

我的问题：

我在模板上列出了几个对象，每个对象都有不同的声音文件，现在我想实现：当 mouseon 对象 1 时，触发该对象的声音等...

到目前为止，我已经实现了当 mouseon 对象 1 时触发声音，但它不适用于其余对象。

【参考方案1】：

您的 html 代码将包含多个带有“mainimagetitle”id 的元素。您必须添加循环索引或对象 ID。

你可以在你的JS代码中使用class属性。

% for maingallery in gallery %
    <div id="frame- maingallery.id ">
    <h1 id="mainimagetitle- maingallery.id " class="mainimagetitleclass">...</h1>
    <div id="frame- forloop.counter ">
    <h1 id="mainimagetitle- forloop.counter " class="mainimagetitleclass">...</h1>
    ...
% endfor %

<script>
    $(document).ready(function() 
        $(".mainimagetitleclass").mouseover(function()...);
        ...
    );
</script>

【参考方案2】：

感谢 Mikhail V 的帮助。您的回答非常有帮助 ;) 虽然我不确定我是否完全按照您展示的那样做

% for maingallery in gallery %


    <div id="frame">
    <h1 id="mainimagetitle"> maingallery.title </h1>
       <a href="% url 'gallery_detail' maingallery.id %"><img class="mainimageclass" id="mainimage- forloop.counter " src=" maingallery.main_image1.url "/></a>
    <p id="mainimagetext"> maingallery.text </p>




<audio class="mainimageaudio" id="jazzy- forloop.counter ">
  <source src=" maingallery.audio_file.url " type="audio/ogg" />
</audio>


        </div>
          <script>
       $(document).ready(function()
       $("#mainimage- forloop.counter ").mouseenter(function()
       $("#jazzy- forloop.counter ").trigger('play');
       );
       $("#mainimage- forloop.counter ").mouseleave(function()
       $("#jazzy- forloop.counter ").trigger('pause').prop("currentTime",0);
       );
       );


        </script>



% endfor %

我使用了 forloop 计数器，因为带有 id 的字符串在我的情况下不起作用，实际上我很惊讶，因为我认为在 jquery 字符串中无法使用 django 模板，一切正常，所以我不会像我做的那样错.

最后一个问题，我使用 ogg 格式的音频文件，但是当我触发按事件播放时，它不会运行得那么快，我有一些短暂的延迟，大约 0.5 秒 -1 秒，但我认为这可能是音频的故障格式，也许一些建议哪种格式最适合音频文件，我听说为一个文件添加几种格式很好。