Блог

У меня есть список в моем 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);

    });
 

Вы должны использовать этот объект для ссылки на текущую нажатую кнопку. Затем нацелите 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>