Bootstrap中的传递值

Question

下面是用于显示调优列表的引导程序代码。单击第一个代码中的标记后，它将转到#tuneIDModal，下面也提到了该代码。我想将超链接标记(data-myvalue(中的值传递给#tuneIDModal(将值替换为291033(。这两个代码都在同一页上。有人能帮我怎么实施吗。

主页.jsp

<!-- Code to show Tune List -->
<div class="item">
<div class="htt-wrap" data-url="downloadfile.jsp?filename=<%=rs1.getString("tnumber")%>.mp3">
<img src="assets/img/desktop_top_tune_01.png" alt="01" />
<div class="item-desc">
<div class="item-desc-top">
<h4><%=rs1.getString("data1")%></h4>
<h6><%=rs1.getString("data2")%></h6>
<span>Tune ID: <%=rs1.getString("tnumber")%></span>
</div>
<div class="item-desc-bottom">
<div class="item-desc-left">
<img class="img-fluid db-play" src="assets/img/play.svg" alt="">
</div>
<div class="item-desc-right">
<a href="#" class="db-modal" data-toggle="modal" data-target="#tuneIDModal" data-myvalue="<%=rs1.getString("tunenumber")%>">
<img class="img-fluid" src="assets/img/dots.svg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>


<!-- details for Tune -->
<div class="modal fade" id="tuneIDModal" tabindex="-1" aria-labelledby="tuneIDModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<div class="db-modal-header-img">
<img src="assets/img/modal-img.png" alt="" class="img-fluid">
</div>
<div class="db-modal-header-content">
<h4>Tune name</h4>
<h6>xyz</h6>
<span>TID: 291033</span>
</div>
<div class="db-modal-header-controls play-modal">
<img src="assets/img/play.svg" alt="" class="img-fluid db-play">
</div>
</div>
</div>
</div>
</div>

Answer 1

您可以编写click事件，这样每当单击.db-modal时，都可以获得attr的值，并使用.text("yourvalue")将该值添加到模态内部的span标记中。

演示代码 ：

//on click of button
$(document).on("click", ".db-modal", function() {
//replcae value inside modal span
$("#tid_modal").text("TID : " + $(this).attr("data-myvalue"))
})

<!-- Code to show Tune List -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="item">
<div class="htt-wrap" data-url="downloadfile.jsp?filename=111.mp3">
<img src="assets/img/desktop_top_tune_01.png" alt="01" />
<div class="item-desc">
<div class="item-desc-top">
<h4>
somwthing
</h4>
<h6>
somwthing 11
</h6>
<span>Tune ID:111</span>
</div>
<div class="item-desc-bottom">
<div class="item-desc-left">
<img class="img-fluid db-play" src="assets/img/play.svg" alt="">
</div>
<div class="item-desc-right">
<a href="#" class="db-modal" data-toggle="modal" data-target="#tuneIDModal" data-myvalue="111"> click
<img class="img-fluid" src="assets/img/dots.svg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>


<!-- details for Tune -->
<div class="modal fade" id="tuneIDModal" tabindex="-1" aria-labelledby="tuneIDModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<div class="db-modal-header-img">
<img src="assets/img/modal-img.png" alt="" class="img-fluid">
</div>
<div class="db-modal-header-content">
<h4>Tune name</h4>
<h6>xyz</h6>
<!--given id here-->
<span id="tid_modal">TID: 291033</span>
</div>
<div class="db-modal-header-controls play-modal">
<img src="assets/img/play.svg" alt="" class="img-fluid db-play">
</div>
</div>
</div>
</div>
</div>