0

我想做一个流行图片游戏之类的东西，当你有一个相册并且必须回答图片的标题时，所以我使用 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 和模板的新手

4

1 回答 1

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());
    }); 


});
于 2012-08-21T23:23:47.750 回答