.replaceWith jquery

Question

我正在使用jquery的.replaceWith()函数来处理我正在设计的webapp应用程序。我的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循环中(用于显示多个“代理”)。所以，我只能逐一打分，一次只能打分一个。我怎样才能改变它，使我可以不按顺序进行评分？我尝试将div id更改为{{forloop.counter}}，但之后javascript可以处理#和{{forloop.counter}}。有什么建议吗？

Answer 1

我想你有多个ID为"rating_services“的div是你循环的结果？

如果是这样，而不是硬编码您想要替换的div的ID，您应该给每个div一个类(即class="rating_services"而不是id="rating_services")，然后使用jQuery closest()函数动态检索div，如下所示：

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

有关最近的()函数的更多信息，请单击此处：http://api.jquery.com/closest/

Answer 2

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

不是将click处理程序绑定到submit按钮，而是将submit处理程序绑定到表单并preventDefault()事件，这样页面就不会提交给自己。

此外，如果您的模板生成重复的if，这是无效的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>");
    });
});

Answer 3

由于点击是在按钮上，也许可以将id放在按钮上。

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

不过，这可能有很多事件处理程序，所以您可能希望使用

$('div.parent_div').delegate('input.button#'+forloop.counter, ...)..