동적 ID 차별화

Question

동적 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'); 
}); 

내 목표는 일반적인 기능을 가지고하는 방법 JS에있는 번호로 {{ $seance->id_seance }}를 "대체"찾는 것입니다.

도움에 감사드립니다!

$('[id^="reservationModal-"]').addClass("reservationModal"); 

를이 사용 :

Answer 1

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>

Answer 2

같이, 그들에게 class를 추가 기능을 차별화하려는 경우

$(".reservationModal").on('shown.bs.modal', function (e) { 
    console.log('works'); 
}); 

을, 당신은 이런 식으로 작업을 수행 할 수 있습니다

$(".reservationModal").each(function() { 
    var currentID = this.id; 
    $(this).on('shown.bs.modal' function(e) {/*...*/}); 
});