区分动态id答案

【问题标题】：Differentiate dynamic id区分动态id
【发布时间】：2018-06-06 04:43:39
【问题描述】：

如何用 jQuery 区分动态 id？

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 }} 以获得通用功能。

感谢您的帮助！

【问题讨论】：

您用来查找模态元素的选择器是正确的，并且会返回一个 div.modal 数组 - 有什么问题？
我不知道如何区分打开的模式。
您可以访问div.modal，因此可以访问您记录“有效”的shown.bs.modal 回调中元素的ID – 使用事件e，您可以使用@987654328 检索ID @.

标签： javascript jquery blade

【解决方案1】：

给他们添加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) {/*...*/});
});

【讨论】：

为什么会这样？ on 方法是否要求选择器是一个类？ o_O

【解决方案2】：

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>

【讨论】：