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

Question

我尝试使用 jquery .data 用 data-target="#testModal1" 更新现有的 data-target 以指向 #testModal2 模态，但即使在数据属性更改后它仍然链接到 #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 类型，包括数组或对象。

---

使用$('#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

Answer 2

就我而言，我的朋友们，这很有效：

<a href="#" data-toggle="collapse" data-target="#collapse1064" 
aria-expanded="true" aria-controls="collapse" 
class="cliccable_submenu d-block position-relative 
text-dark text-uppercase collapsible-link py-2">Link</a>

$('a[data-target="#collapse1064"]').attr("aria-expanded","true");