0

設計しているWebアプリケーションにjqueryの.replaceWith（）関数を使用しています。私のHTMLはこれです：

{% for service in services %}                   
<div id="service" name="name" value="{{service.name}}">
{{service.name}} <a href='main/name/{{service.name}}'> Click if you want to see more </a>
<div id="rating_services">
<form name="rating">
{% csrf_token %}
    <input name="star1" id="star_1" type="radio" class="star" value="1"/>
<input name="star1" id="star_2" type="radio" class="star" value="2"/>
<input name="star1" id="star_3" type="radio" class="star" value="3"/>
<input name="star1" id="star_4" type="radio" class="star" value="4"/>
<input name="star1" id="star_5" type="radio" class="star" value="5"/> 
<input type="submit" class="button" id="submit_btn" value="Rate this agency!">
</form>
{% endfor %}
</div>

そして私のJavaScriptはこれです：

$(function() 
{  
$(".button").click(function()
  {  
  $('#rating_services').replaceWith("<div id='thanks'> Thanks! </div>");    
  }
});

私がやりたいのは、ユーザーが評価するかどうかです。評価の代わりに感謝が表示されます。ただし、情報はforループ内に表示されます（複数の「エージェンシー」を表示するため）。ですから、私は一度に1つずつしか評価できません。順不同で評価できるように変更するにはどうすればよいですか？iddivをに変更しようとしまし{{forloop.counter}}たが、javascriptはとを処理でき#ます{{forloop.counter}}。助言がありますか？

4

3 に答える 3

4

divループの結果として、IDが「rating_services」の複数のが存在すると思いますか？

divその場合、置き換えるIDをハードコーディングする代わりに、各divsaクラスを（つまり、class="rating_services"の代わりに）指定してから、以下のようにjQuery関数を使用して動的にid="rating_services"取得する必要があります。divclosest()

$(function()
{
  $(".button").click(function()
    {
      $(this).closest('.rating_services').replaceWith("<div id='thanks'> Thanks! </div>");
    }
  );
});

ここでclosest（）関数の詳細：http： //api.jquery.com/closest/

于 2012-11-04T23:22:01.017 に答える
2 
$(function() {
    $("form[name=rating]").submit(function(e) {
        e.preventDefault();
        $('#rating_services').replaceWith("<div id='thanks'> Thanks! </div>");
    });
});

フィドル

clickハンドラーを送信ボタンにバインドする代わりに、submitハンドラーをフォームとpreventDefault()イベントにバインドして、ページがそれ自体に送信されないようにします。

また、テンプレートが重複するIDを生成する場合、それは無効なHTMLであり、JSは正しく機能しません。

代わりにクラスを使用する必要があります。

<div class="rating_services">

そしてJS：

$(function() {
    $("form[name=rating]").submit(function(e) {
        e.preventDefault();
        $(this).closest('.rating_services').replaceWith("<div id='thanks'> Thanks! </div>");
    });
});

フィドル

于 2012-11-04T23:24:59.877 に答える
0

クリックはボタンをクリックするので、おそらくボタンにIDを付けます

$('input.button#'+forloop.counter).click(function() 
 {
$('#rating_services'+ forloop.counter).replaceWith(...
 }

それは多くのイベントハンドラーかもしれませんが、あなたは使用したいかもしれません

$('div.parent_div').delegate('input.button#'+forloop.counter, ...)..
于 2012-11-04T23:23:19.210 に答える