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

2つのことが起こります。1つ目は、jsの関数で使用する{{photo.name}}を渡す方法です。これが答えです。

2番目の奇妙な動作は次のとおりです。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 に答える