时间戳

首页 > 解决方案 > js从模态抓取类

javascript - js从模态抓取类

问题描述

我的 html 中有一个由foreach循环构建的列表，列表中的每个项目都有一个到模态的链接（使用模态中的唯一编号构建id）

无论如何，每行的模态都会弹出正确的信息，并且我有一个按钮，我试图（按下按钮时）抓取h2类campaign_id并在控制台中打印文本。目前它打印到控制台，但每次都会打印列表中的最终值，这可能是foreach.

如何获取仅当前弹出模式的 H2 文本并将其打印到控制台？

    @foreach($getList as $campaign)
    <div id="expire_campaign_modal{{$campaign->campaign_id}}" class="uk-modal">
        <div class="uk-modal-dialog" style="width:30%;">
            <a class="uk-modal-close uk-close"></a>
            <div class="uk-grid">
                <div class="uk-width-1-1">
                    <div class="md-card">
                        <div class="md-card-content" style="text-align: center;">
                            <div style="display:flex; justify-content:center; align-items:baseline;">
                                <h2 class="campaign_id">{{$campaign->campaign_id}} - </h2>
                                <h2 style="margin-left: 10px;"> {{$campaign->campaign_name}}</h2>
                            </div>
                            <h3>Are you sure you want to expire this campaign?</h3>
                            <button class="uk-button uk-button-primary expire-campaign">Expire</button>
                            <button class="uk-button uk-button-default uk-modal-close">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach

    $(".expire-campaign").click(function(e){

        e.preventDefault();

        var campaign_id = document.querySelector(".campaign_id").textContent;

        console.log(campaign_id);

    });

标签： javascriptjqueryhtml

解决方案

您必须使用此对象来引用当前单击的按钮。然后将closest()具有类的元素定位md-card-content到find()预期的元素。

改变：

var campaign_id = document.querySelector(".campaign_id").textContent;

到：

var campaign_id = $(this).closest('.md-card-content').find(".campaign_id").text();

演示：

$(".expire-campaign").click(function(e){
  console.clear();
  e.preventDefault();
  var campaign_id = $(this).closest('.md-card-content').find(".campaign_id").text();
  console.log(campaign_id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="expire_campaign_modal1" class="uk-modal">
  <div class="uk-modal-dialog" style="width:30%;">
      <a class="uk-modal-close uk-close"></a>
      <div class="uk-grid">
          <div class="uk-width-1-1">
              <div class="md-card">
                  <div class="md-card-content" style="text-align: center;">
                      <div style="display:flex; justify-content:center; align-items:baseline;">
                          <h2 class="campaign_id">campaign->campaign_id -1 </h2>
                          <h2 style="margin-left: 10px;"> campaign->campaign_name 1</h2>
                      </div>
                      <h3>Are you sure you want to expire this campaign?</h3>
                      <button class="uk-button uk-button-primary expire-campaign">Expire</button>
                      <button class="uk-button uk-button-default uk-modal-close">Cancel</button>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

<div id="expire_campaign_modal2" class="uk-modal">
  <div class="uk-modal-dialog" style="width:30%;">
      <a class="uk-modal-close uk-close"></a>
      <div class="uk-grid">
          <div class="uk-width-1-1">
              <div class="md-card">
                  <div class="md-card-content" style="text-align: center;">
                      <div style="display:flex; justify-content:center; align-items:baseline;">
                          <h2 class="campaign_id">campaign->campaign_id - 2</h2>
                          <h2 style="margin-left: 10px;"> campaign->campaign_name 2</h2>
                      </div>
                      <h3>Are you sure you want to expire this campaign?</h3>
                      <button class="uk-button uk-button-primary expire-campaign">Expire</button>
                      <button class="uk-button uk-button-default uk-modal-close">Cancel</button>
                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

推荐阅读