【发布时间】：2021-07-19 18:39:47
【问题描述】：
我有以下模型形式：
<div class="modal fade modal-right select-from-library" id="libraryModal" tabindex="-1" role="dialog"
aria-labelledby="libraryModal" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select from Library</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body scroll pt-0 pb-0 mt-4 mb-4 cast">
<div class="accordion" id="accordion">
<div class="mb-2">
<button class="btn btn-link p-0 folder-button-collapse" data-toggle="collapse"
data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="icon-container">
<i class="simple-icon-arrow-down"></i>
</span>
<span class="folder-name">Data</span>
</button>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="list disable-text-selection">
<div class="row">
<div class="test">
<div class="d-flex align-self-stretch">
</div>
<div class="d-flex flex-grow-1 min-width-zero">
<div
class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
<div class="w-100 name_casting">
<!-- <p class="truncate mb-0">OK</p> -->
</div>
</div>
<div
class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
<label class="custom-control custom-checkbox mb-0">
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Annuler</button>
<button type="button" class="btn btn-primary sfl-submit" id="submit" name="submit">Générer</button>
</div>
</div>
</div>
</div>
还有以下脚本：
<script>
$(document).ready(function(){
$('#numero_projet').change(function(){
var id_projet = $(this).find("option:selected").data("id");
console.log(id_projet);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN':
$('meta[name="_token"]').attr('content') }
});
$.ajax({
url:"getProjet/"+id_projet,
type:"GET",
success:function(html){
renderTemplate(html)
}
});
function renderTemplate(html) {
var content = html.castings.map((casting) => `<div class="cast col-6 mb-1 sfl-item-container" data-preview-path="{{ URL::to('/') }}/castingimages/${casting.photo}" data-path="{{ URL::to('/') }}/castingimages/${casting.photo}" data-label="${casting.nom} ${casting.prenom}" data-id="${casting.id_casting}">
<div class="card d-flex mb-2 p-0 media-thumb-container">
<div class="d-flex align-self-stretch">
<img src="{{ URL::to('/') }}/castingimages/${casting.photo}" alt="uploaded image" class="list-media-thumbnail responsive border-0"/>
</div>
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body pr-1 pt-2 pb-2 align-self-center d-flex min-width-zero">
<div class="w-100">
<p class="truncate mb-0" >${casting.nom} ${casting.prenom}</p>
</div>
</div>
<div
class="custom-control custom-checkbox pl-1 pr-1 align-self-center">
<label class="custom-control custom-checkbox mb-0">
<input type="checkbox" class="custom-control-input">
<span class="custom-control-label"></span>
</label>
</div>
</div>
</div></div>
`);
$("div.test").append(content);
}
})
})
</script>
模型表单中所有选中的元素都显示在这个块中：
<div class="select-from-library-container mb-1">
<div class="row">
<div class="col-sm-12 col-md-6 col-xl-4">
<div class="select-from-library-button sfl-multiple mb-5 casting_generes"
data-library-id="#libraryModal" data-count="-1">
<div
class="card d-flex flex-row mb-4 media-thumb-container justify-content-center align-items-center">
Select from library
</div>
</div>
<button type="button" class="btn btn-primary" id="generer" name="generer">Générer</button>
<div class="selected-library-item sfl-selected-item mb-5 ">
<div class="card d-flex flex-row media-thumb-container libr">
<a class="d-flex align-self-center">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
alt="uploaded image"
class="list-media-thumbnail responsive border-0 sfl-selected-item-image" />
</a>
<div class="d-flex flex-grow-1 min-width-zero">
<div
class="card-body align-self-center d-flex flex-column justify-content-between min-width-zero align-items-lg-center">
<a class="w-100">
<p
class="list-item-heading mb-1 truncate sfl-selected-item-label">
</p>
</a>
</div>
<div class="pl-1 align-self-center">
<a href="#"
class="btn-link delete-library-item sfl-delete-item"><i class="simple-icon-trash"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
喜欢：
所以现在我想使用以下代码来获取这个 bloc bu 中每个元素的数据 ID：
$('#generer').click(function(){
var id = $("libr").attr("data-id");
console.log(id);
});
但我收到了undefined
通常我从脚本的这一行传递图像的data-label 和data-path：
<div class="cast col-6 mb-1 sfl-item-container" data-preview-path="{{ URL::to('/') }}/castingimages/${casting.photo}" data-path="{{ URL::to('/') }}/castingimages/${casting.photo}" data-label="${casting.nom} ${casting.prenom}" data-id="${casting.id_casting}">
但是为什么当我尝试获取 data-id 时我得到 undefined ？
【问题讨论】：