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

我认为你的循环有多个div，ID为“rating_services”？

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

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

有关nearest（）函数的更多信息，请点击此处： http://api.jquery.com/closest/

Answer 2

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

Fiddle

不是将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>");
    });
});

Fiddle

Answer 3

由于点击在按钮上，可能会将ID放在按钮上

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

可能是很多事件处理程序，所以你可能想要使用

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

.replaceWith jquery

3 个答案: