Question

我想做一个类似Pop Pop Game的东西，当你有一张图片专辑并且必须回答图片的标题时，所以我使用Django + Kickstrap + jQuery（用于逻辑代码）

这是我的模板。

    <ul class="thumbnails" >
        <li class="span12" id="pops">
        {% for photo in pops.photos.all %}
            <div class="thumbnail span3" id="pop_picture">
              <img src="{{MEDIA_URL}}{{photo.original_image}}"alt="{{photo.name}}">
              <br>
              <p id="answer">{{photo.name}}</p>
              <input id="txt_pop" type="text"  value=""/>
              <button id="pops_button" type="submit"  class="btn">confere</button>
            </div>
        {% endfor %}

        </li>
    </ul>

- myscript.js

function myCallback() {
    //do things!;
    if( $("#txt_pop").val() === $("#answer").text())
    {
        $("#pops_button").addClass("btn-success");
        $("#pops_button").text("CORRETO");  
    }else{
       $("#pops_button").text("ERRADO");
       $("#pops_button").addClass("btn-danger");
   }
}

$(document).ready(function() {

    //and then change this code so that your callback gets run
    //when the button gets clicked instead of mine.
    // **by the way, this is jQuery!
    $('#pops').find("#pops_button").click(myCallback); 
});

有两件事情发生，第一件事：如何传递{{photo.name}}，这就是答案，用于我在js上的函数。

第二个奇怪的行为是：只是我的第一个id =“pop_picture”的div类工作正常，其他任何图片反应都很好。

这个问题混合了：jQuery和模板上的新手

Answer 1

对于多次出现的元素，请勿使用id。这可能就是为什么只有你的第一个工作而不是其他工作。与id="answer"相同的问题 - 使用一个类，并通过jQuery找到它。

{% for photo in pops.photos.all %}
        <div class="thumbnail span3" id="pop_picture">
          <img src="{{MEDIA_URL}}{{photo.original_image}}"alt="{{photo.name}}">
          <br>
          <p class="answer">{{photo.name}}</p>
          <input class="txt_pop" type="text"  value=""/>
          <button class="btn pops_button" type="submit">confere</button>
        </div>
{% endfor %}

$(document).ready(function() {
    $('#pops .pops_button').click(function() {
       alert($(this).parent().find('.answer').html());
    }); 


});

Django Templates + jQuery +更好的方法

1 个答案: