Javascript 如何使用Jquery更新数据确认属性中的消息？

我在rails应用程序中与资源和标志有多态关联。每个资源都可以由用户标记

在资源编辑页面上，管理员可以通过Jquery删除与每个资源关联的多个标志。（这个很好用）

然后，我尝试在用户更新资源之前，使用“数据确认”属性显示警报消息中剩余的标志总数

例如：

<%= f.submit "Update Resource", data: { confirm: "Reminder: You have #{@flaggable.flags.count} flag alerts remaining." } %>

资源控制器

#edit page
def edit
  @district = District.find_by_abbreviation(params[:district_id])
  @resource = @district.resources.find(params[:id])   
  @flaggable = @resource
  @flags = @flaggable.flags.all 
end

视图

class Resource 
  belongs_to :district
  has_many :flags, as: :flaggable, :dependent => :destroy  
end 

class Flag 
  belongs_to :flaggable, polymorphic: true
end

edit.html.erb-资源编辑页面

###Renders all flags & allows a user to delete flags via Javascript.
<div id="flags">
  <%= render :partial => "flags/flag", :collection => @flags %>
</div>

###Resource Form
<div>
  <%= simple_form_for ([@district, @district_resource]) do |f| %>

    <div id="counter>

      ###How can I directly target the variable inside my alert message/data-confirm?
      <%= f.submit "Update Resource", data: { confirm: "Reminder: You have #{@flaggable.flags.count} flag alerts remaining." } %>

    </div>

  <% end %>
</div>

####呈现所有标志&允许用户通过Javascript删除标志。
“flags/flag”，：collection=>@flags%>
###资源形式
嗯，
$（“#计数器”）
正在选择
div，而
.html（）
正在更改整个div内容。因此，您的代码正按照您的要求执行。您应该将“计数器”div中的
submit
按钮作为目标，并更改
data confirm
属性的文本

$("#counter input[data-confirm]").data("Reminder: You have #{@flaggable.flags.count} flag alerts remaining.");

请注意，如果使用javascript更改标志的数量，文本中的变量将是原始值（
@flaggable.flags.count
）。您需要在属性文本中正则化数字，并使用javascript对其进行更改。
好吧，
$（“#计数器”）
正在选择
div，而
.html（）
正在更改整个div内容。因此，您的代码正按照您的要求执行。您应该将“计数器”div中的
submit
按钮作为目标，并更改
data confirm
属性的文本

$("#counter input[data-confirm]").data("Reminder: You have #{@flaggable.flags.count} flag alerts remaining.");

请注意，如果使用javascript更改标志的数量，文本中的变量将是原始值（
@flaggable.flags.count
）。您需要在属性文本中正则化数字，并使用javascript对其进行更改。
将JSON放入变量，然后将其分配到元素属性：

var data = { confirm: "Reminder: You have #{@flaggable.flags.count} flag alerts remaining." }
$("#counter input").attr("data-confirm",data.confirm);

将JSON放入变量，然后将其分配到元素属性：

var data = { confirm: "Reminder: You have #{@flaggable.flags.count} flag alerts remaining." }
$("#counter input").attr("data-confirm",data.confirm);

结合下面的答案来解决这个问题。谢谢大家

newFlagCount = $('#flags .flag').length;
var data = { confirm: "Reminder: You have " + newFlagCount + " flag alerts remaining." }
$("#counter input[data-confirm]").data('confirm', data.confirm)

结合下面的答案来解决这个问题。谢谢大家

newFlagCount = $('#flags .flag').length;
var data = { confirm: "Reminder: You have " + newFlagCount + " flag alerts remaining." }
$("#counter input[data-confirm]").data('confirm', data.confirm)

如果这是您想要的，则不需要更改视图中的代码。但是，如果使用Javascript更改标志计数，则
data confirm
文本中的值不会更改。假设页面加载时您有5个标志，确认消息将显示您有5个标志。然后，您允许用户删除其中一个标志，并向服务器发送一个ajax请求，请求删除该标志。当用户再次单击该按钮时，确认消息仍然会显示您有5个标志，而不是4个。如果您还没有使用regex，则只需在使用javascript删除标志后替换整个字符串：
$（“#计数器输入[数据确认]”）。数据（“提醒：您还有“+newFlagCount+”标志警报。”）。话虽如此，您只需要在前端对标志进行任何操作时执行此操作。我认为必须将变量newFlagCount设置为正确的位置？是的，您可以使用jQuery代码如下计算标志数：
newFlagCount=$（'#flags li'）.size（）
。在那里更改选择器。我假设您的标志位于
li
标记中。您可以将选择器更改为
newFlagCount=$（“#flags div[id]”）。size（）
。但是我建议在
中添加一个类，并使上面的选择器更加健壮
newFlagCount=$（'#flags.flag'）.size（）
。如果您只想更改，则无需更改视图中的代码。但是，如果使用Javascript更改标志计数，则
data confirm
文本中的值不会更改。假设页面加载时您有5个标志，确认消息将显示您有5个标志。然后，您允许用户删除其中一个标志，并向服务器发送一个ajax请求，请求删除该标志。当用户再次单击该按钮时，确认消息仍然会显示您有5个标志，而不是4个。如果您还没有使用regex，则只需在使用javascript删除标志后替换整个字符串：
$（“#计数器输入[数据确认]”）。数据（“提醒：您还有“+newFlagCount+”标志警报。”）。话虽如此，您只需要在前端对标志进行任何操作时执行此操作。我认为必须将变量newFlagCount设置为正确的位置？是的，您可以使用jQuery代码如下计算标志数：
newFlagCount=$（'#flags li'）.size（）
。在那里更改选择器。我假设您的标志位于
li
标记中。您可以将选择器更改为
newFlagCount=$（“#flags div[id]”）。size（）
。但是我建议在
中添加一个类，并使上述选择器更加健壮
newFlagCount=$（'#flags.flag'）.size（）
。