jQuery 如何更新现有的 Bootstrap 模态数据目标？

How do you update an existing Bootstrap modal data-target?

提问by perseverance

I tried to update an existing data-targetwith a data-target="#testModal1"to point to the #testModal2modal using jquery .data, but even after the data attribute change it still is linked to #testModal1

我尝试使用 jquery 使用data-targeta更新现有的data-target="#testModal1"指向#testModal2模态.data，但即使在数据属性更改后，它仍然链接到#testModal1

//Jquery:

$('#testButton').data('target', '#testModal2')

<!-- HTML: -->


<button id='testButton' data-toggle="modal" data-target="#testModal1">
      Test
    </button>

<div class="modal fade" id="testModal1" tabindex="-1" role="dialog" aria-hidden="true" style='display:none'>
  <div class="modal-dialog">
    <div class="modal-content">
      Testing Testing 1
    </div>
  </div>
</div>

<div class="modal fade" id="testModal2" tabindex="-1" role="dialog" aria-hidden="true" style='display:none;'>
  <div class="modal-dialog">
    <div class="modal-content">
      Testing Testing 2
    </div>
  </div>
</div>

回答by Ionic? Biz?u

Let's look in the jQuery documetation what .data()is:

让我们看看 jQuery 文档是什么.data()：

.data()

Store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.

.data( key, value )

Description: Store arbitrary data associated with the matched elements.

• key

  Type: String

  A string naming the piece of data to set.

• value

  Type: Object

  The new data value; it can be any Javascript typeincluding Array or Object.

.data()

存储与匹配元素关联的任意数据，或在命名数据存储中返回匹配元素集中第一个元素的值。

.data( key, value )

描述：存储与匹配元素关联的任意数据。

• 钥匙

  类型： String

  命名要设置的数据片段的字符串。

• 价值

  类型：对象

  新的数据值；它可以是任何 Javascript 类型，包括数组或对象。

---

---

Using $('#testButton').data('target','#testModal2')you will notmodify the data-targetattribute but you will store the string "#testModal2"in "target"field. Then $('#testButton').data('target')will return "#testModal2".

使用 $('#testButton').data('target','#testModal2')您不会修改data-target属性，但您会将字符串存储"#testModal2"在"target"字段中。然后$('#testButton').data('target')会返回"#testModal2"。

It's true that .data('key')can be used to return the data-keyattribute value. But you cannot set it using .data('key', 'newValue').

确实.data('key')可以用于返回data-key属性值。但是您不能使用.data('key', 'newValue')设置它。

To set an attribute value the most common and easy way is to use .attr()method.

要设置属性值，最常见和最简单的方法是使用.attr()方法。

So, the answer is easy: change datain attrand use data-targetinstead of target:

所以，答案很简单：变化data中attr和使用data-target，而不是target：

$('#testButton').attr('data-target','#testModal2');

JSFIDDLE

JSFIDDLE