Question

我正在动态尝试将我从for循环获取的数据传递给按钮。我使用django来获取for循环中的数据，html使按钮和jquery传递数据。我不确定这是否是最好的描述。

我的代码是：

{% for dogs in Dogs.Other %}
    <form id="primaryDogForm" action="{% url 'personal:account:email_dog_confirm' %}" method="post">
        {% csrf_token %}
        <input type="hidden" id="dogId" name="dogId" value="{{ dogs }}">
        <input type="button" value="Make this your primary dog" id="makePrimaryButton" class="btn btn-primary" data-toggle="modal" data-target="#makePrimary" />
    </form>
{% endfor %}

基本上，人们可以在他们的帐户中添加一个狗列表，并选择一只狗作为他们的主要狗。我想在点击按钮时调用模态。而那个模态应该显示可能成为主要狗的狗的名字。模态代码如下：

<div class="modal fade" id="makePrimary" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Make Primary</h4>
                </div>
                <div class="modal-body">
                    <p>
                            You are about to make <span id="newDog" name="newDog"></span> your primary dog.
                        </p>
                        <hr>
                    <a href="#" id="makePrimarySubmit" class="btn btn-primary">Submit</a>
                </div>
            </div>
        </div>
    </div>

使一切顺利的jquery是：

$('#makePrimaryButton').click(function() {
            ($('#newDog').text($('#dogId').val()));
 });

$('#makePrimarySubmit').click(function(){
            $('#primaryDogForm').submit();
});

我面临的问题是，假设我有三只狗的清单，每只狗都有一只＃34;让它成为你的主要狗＃34;按钮，然后该按钮仅适用于第一只狗。在单击第一个按钮之前，其余按钮不起作用。单击第一个按钮后，所有其他按钮也会获得第一个狗的值。因此，列表中的狗2和狗3不能成为主要的狗。

我很确定问题出在我的html和jquery上。有没有办法让我按钮动态，以便按钮获取与之关联的狗的值？这样，任何狗都可以成为小狗。

非常感谢你。

Answer 1

这里的问题在于您在for循环中放置了初始HTML的ID。 ID在HTML中是唯一的 - 您应该只有一个ID在页面上具有该ID名称。这也是jquery选择器只能正确选取第一个按钮的原因。

相反，解决这个问题的一种方法是使用类而不是ID＆＃39; s，如下所示：

{% for dogs in Dogs.Other %}
  <form class="primaryDogForm" action="{% url 'personal:account:email_dog_confirm' %}" method="post">
      {% csrf_token %}
      <input type="hidden" class="dogId" name="dogId" value="{{ dogs }}">
      <input type="button" value="Make this your primary dog" class="btn btn-primary makePrimaryButton" data-toggle="modal" data-target="#makePrimary" />
  </form>
{% endfor %}

然后，您需要更新您的jquery代码以反映此更改：

var lastEditedForm = null;

$('.makePrimaryButton').click(function() {
  lastEditedForm = $(this).closest('form');
  var dogId = lastEditedForm.find('.dogId').val();
  $('#newDog').text(dogId);
});

$('#makePrimarySubmit').click(function(){
  lastEditedForm.submit();
});

请注意，因为您已经定义了模式的点击事件，您点击了哪个狗按钮 - 最后点击了哪个狗按钮需要在确认模态时进行跟踪。

在两个点击处理程序之外使用变量只是处理此问题的一种方法，可能不是最好的方法。另一种方法是在单击初始dog按钮后定义临时事件处理程序 - 但这也需要确保在模式被取消时事件被正确清理。

- 编辑解释临时事件处理程序 -

为了在每次按下dog按钮时创建临时事件处理程序，还需要确保每次都删除临时处理程序（无论如何）。在这种情况下，因为您正在使用引导模式，我们可以使用模态上的close事件来明确清除事件处理程序。

javascript看起来像这样：

$('.makePrimaryButton').click(function() {
  // note we're still placing the form in a variable here
  // so we have easy reference to it in the temporary event
  // handler below
  var currentForm = $(this).closest('form');
  var dogId = currentForm.find('.dogId').val();
  $('#newDog').text(dogId);

  $('#makePrimaryButton').one('click', function(){
    currentForm.submit();
  })
});

// hidden.bs.modal is for Bootstrap v3 or v4. If you're using
// Bootstrap v2 it's just 'hidden.'
$('#makePrimary').on('hidden.bs.modal', function(){
  // clears absolutely all event handlers on the button,
  // not just the ones we set. We would need a reference to
  // the function we set earlier in order to take just
  // that function off.
  $('#makePrimaryButton').off();
})

Answer 2

您应该向按钮添加数据属性。下面的链接提供了一个很好的例子：

Passing data to a bootstrap modal

动态创建按钮或将数据发送到按钮

2 个答案: