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

Question

我尝试使用jquery 更新现有data-target的a 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>

Answer 1

让我们看看jQuery文档中的内容.data()是什么:

.data()

存储与匹配元素关联的任意数据,或者在指定数据存储中返回匹配元素集中第一个元素的值.

.data( key, value )

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

• 键

  类型: String

  命名要设置的数据的字符串.

• 值

  类型:对象

  新数据值; 它可以是任何Javascript类型,包括Array或Object.

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

确实.data('key')可以用来返回data-key属性值.但你无法设置它.data('key', 'newValue').

要设置属性值,最常用也是最简单的方法是使用.attr()方法.

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

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

的jsfiddle