区分动态id
Differentiate dynamic id
如何区分动态 ID 和 jQuery?
HTML :
@foreach($listeSeances as $seance)
...
<div class="modal fade reservationModal" id="reservationModal-{{ $seance->id_seance }}" tabindex="-1" role="dialog" aria-labelledby="reservationModal-{{ $seance->id_seance }}" aria-hidden="true">
...
</div>
@endforeach
JS :
$('[id^="reservationModal-"]').on('shown.bs.modal', function (e) {
console.log('works');
});
我的objective是在JS中通过任意数"replace"{{ $seance->id_seance }}
找到泛型函数的方法
感谢您的帮助!
给他们加一个class
,像这样:
$('[id^="reservationModal-"]').addClass("reservationModal");
并使用这个:
$(".reservationModal").on('shown.bs.modal', function (e) {
console.log('works');
});
如果要区分功能,可以这样:
$(".reservationModal").each(function() {
var currentID = this.id;
$(this).on('shown.bs.modal' function(e) {/*...*/});
});
shown.bs.modal
事件的目标是 div.modal
,您可以从中检索元素 ID – 通过一些解析,您可以获得 id_seance
之前的原始值它是插值的。
$('[id^="reservationModal-"]').on('shown.bs.modal', function (e) {
let id_seance = e.target.id.split('-').pop(-1);
console.log('works', { id_seance });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reservationModal-1">
Reservation 1
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reservationModal-2">
Reservation 2
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reservationModal-3">
Reservation 3
</button>
<div class="modal fade reservationModal" id="reservationModal-1" tabindex="-1" role="dialog" aria-labelledby="reservationModal-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Reservation 1</h5>
</div>
</div>
</div>
</div>
<div class="modal fade reservationModal" id="reservationModal-2" tabindex="-1" role="dialog" aria-labelledby="reservationModal-2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Reservation 2</h5>
</div>
</div>
</div>
</div>
<div class="modal fade reservationModal" id="reservationModal-3" tabindex="-1" role="dialog" aria-labelledby="reservationModal-3" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Reservation 3</h5>
</div>
</div>
</div>
</div>
如何区分动态 ID 和 jQuery?
HTML :
@foreach($listeSeances as $seance)
...
<div class="modal fade reservationModal" id="reservationModal-{{ $seance->id_seance }}" tabindex="-1" role="dialog" aria-labelledby="reservationModal-{{ $seance->id_seance }}" aria-hidden="true">
...
</div>
@endforeach
JS :
$('[id^="reservationModal-"]').on('shown.bs.modal', function (e) {
console.log('works');
});
我的objective是在JS中通过任意数"replace"{{ $seance->id_seance }}
找到泛型函数的方法
感谢您的帮助!
给他们加一个class
,像这样:
$('[id^="reservationModal-"]').addClass("reservationModal");
并使用这个:
$(".reservationModal").on('shown.bs.modal', function (e) {
console.log('works');
});
如果要区分功能,可以这样:
$(".reservationModal").each(function() {
var currentID = this.id;
$(this).on('shown.bs.modal' function(e) {/*...*/});
});
shown.bs.modal
事件的目标是 div.modal
,您可以从中检索元素 ID – 通过一些解析,您可以获得 id_seance
之前的原始值它是插值的。
$('[id^="reservationModal-"]').on('shown.bs.modal', function (e) {
let id_seance = e.target.id.split('-').pop(-1);
console.log('works', { id_seance });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reservationModal-1">
Reservation 1
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reservationModal-2">
Reservation 2
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#reservationModal-3">
Reservation 3
</button>
<div class="modal fade reservationModal" id="reservationModal-1" tabindex="-1" role="dialog" aria-labelledby="reservationModal-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Reservation 1</h5>
</div>
</div>
</div>
</div>
<div class="modal fade reservationModal" id="reservationModal-2" tabindex="-1" role="dialog" aria-labelledby="reservationModal-2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Reservation 2</h5>
</div>
</div>
</div>
</div>
<div class="modal fade reservationModal" id="reservationModal-3" tabindex="-1" role="dialog" aria-labelledby="reservationModal-3" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Reservation 3</h5>
</div>
</div>
</div>
</div>