由ListView顯示的模板上的JQuery，如何分別在每個對象上觸發播放？

Question

我的模板

{% 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然後聲音被觸發，但它不是工作休息的對象。

Answer 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>

Answer 2

感謝您的幫助米哈伊爾·五你的答案是非常有幫助;）雖然我不知道如果我這樣做是完全一樣，你給我

{% 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.5s -1s，但我認爲它可能是錯誤的音頻格式，也許一些建議哪種格式最適合音頻文件，我聽說爲一個文件添加幾個格式是很好的。