使用 jQuery / Laravel 获取所选项目的 data-id 或主键

Question

我有以下模型形式：

查看：

<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">&times;</span>
        </button>
      </div>

      <div class="modal-body scroll pt-0 pb-0 mt-4 mb-4">
        <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>

看起来像：

当我点击 chechbox 然后点击按钮 générer 我根据这段代码得到以下结果：

<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" 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>
      <div class="selected-library-item sfl-selected-item mb-5">
        <div class="card d-flex flex-row media-thumb-container">
          <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>

结果如下：

现在我想获取数据 ID 或例如此块中所选项目的主键，以使用 ajax 请求发送它以从数据库中获取数据。

我被困在这一点上，如果您对如何获取我提到的最后一个集团中所选项目的 id 有任何想法，我会很感激。

提前谢谢你

更新

我正在尝试获取每个选定项目的数据 ID：

所以我正在尝试：

var dataID = $('cast').data('data-id');
alert(dataID);

但我得到了：undefined

Answer 1

这个：$('cast').data('data-id'); 正在寻找类似<cast data-data-id="value">...</cast> 的东西。

您可能要查找的是$('.cast').data('id')，它将查找具有cast 类的任何元素并从中提取data-id 属性。 （例如：<div class="cast" data-id="value">...</div>）