如何将数据属性的值传递给Bootstrap模式中的元素?

Question

Сlicking在任何块中的按钮上打开一个模态窗口，其中包含来自后者的数据。

我把这篇文章作为一个例子，但它不适合我。

$(document).on("click", ".openBlogDialog", function() {
var myBlogId = $(this).data('id');
$(".modal-body #elId").val(myBlogId);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<a class="btn btn-link primary openBlogDialog" data-bs-toggle="modal" href="#openBlog" data-bs-id="3">Open<i class="uil uil-arrow-right"></i></a>
<div class="modal fade absolute-center" id="openBlog" tabindex="-1" aria-bs-labelledby="blog-single-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
{{el.title}}
<button class="btn-close" data-bs-dismiss="modal" aria-bs-label="close"></button>
</div>
<div class="modal-body">
<img src="{{el.picture.url}}" class="img-fluid rounded-md shadow" alt="">
<p name="elId" id="elId">{{ el.content }}</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

Answer 1

1. 您将数据属性命名为data-bs-id，但随后您试图将其检索为data-id。
2. 你试图在一个段落上设置一个值。段落没有value属性。

$(document).on("click", ".openBlogDialog", function() {
const myBlogId = $(this).data('id');
$("#elId").text(myBlogId);
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<a class="btn btn-link primary openBlogDialog" data-bs-toggle="modal" href="#openBlog" data-id="3">Open<i class="uil uil-arrow-right"></i></a>
<div class="modal fade absolute-center" id="openBlog" tabindex="-1" aria-bs-labelledby="blog-single-label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
{{el.title}}
<button class="btn-close" data-bs-dismiss="modal" aria-bs-label="close"></button>
</div>
<div class="modal-body">
<img src="{{el.picture.url}}" class="img-fluid rounded-md shadow" alt="">
<p name="elId" id="elId">{{ el.content }}</p>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>