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 循环中（用于显示多个“代理”）。所以，我只能一个一个地评价，一次一个。如何更改它以便我可以不按顺序进行评分？我试图将 div 更改id为{{forloop.counter}}，但随后 javascript 可以处理#和{{forloop.counter}}。有什么建议么？

4

3 回答 3

4

我认为div由于您的循环，您有多个 ID 为“rating_services”的 s？

如果是这样，而不是硬编码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>");
    }
  );
});

更多关于最接近（）函数的信息：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 回答