Мне нужен способ определить, какая кнопка нажимается, когда все кнопки генерируются php

Question

Я использую php для генерации неопределенного количества div, и каждый div форматируется одинаково, но имеет различную заполняемую информацию. Моя проблема в том, что я не могу понять, как определить, в каком div находится нажатая кнопка? Я хотел бы иметь возможность узнать $ row ["bar_name"] для нажатой кнопки. то есть, если нажата понедельник, мне также нужно знать, в каком $ row ["bar_name"] находилась кнопка понедельника. Я изменил форматирование того, как генерируется div, потому что его легче читать, когда он находится в формате html, по сравнению с выводом в php. Любая помощь приветствуется, спасибо!

// how the div is being generated (slightly altered for easier readability)
<?php
    if (mysqli_num_rows($result) > 0) {
        while($row = mysqli_fetch_assoc($result)) {
//this is echoed as one string in my actual code
<div id='" . $row["bar_name"] . "'>
    <h3 id='barTitle' class='bar'>" . $row["bar_name"] . "</h3>
    <h6 id='subTitle'>". $row["hourStart"] . "-" . $row["hourEnd"] . "  |  " . $row["area"] . "</h6>
        <table>
            <tr>
                <th class='dowb'> <button id='monday'> Monday </button></th>
                <th class='dowb'> <button id='tuesday'> Tuesday </button></th>
                <th class='dowb'> <button id='wednesday'> Wednesday </button></th>
                <th class='dowb'> <button id='thursday'> Thursday </button></th>
                <th class='dowb'> <button id='friday'> Friday </button></th>
                <th class='dowb'> <button id='saturday'> Saturday </button></th>
                <th class='dowb'> <button id='sunday'> Sunday </button></th>
                <br>
            </tr>
            </table>
            <br>
                <table>
                    <tr>
                        <th class='barInfo'> <strong> Drinks: </strong></th>
                        <th class='barInfo'> <strong> Food: </strong></th>
                    </tr>
                    <tr>
                        <th class='barInfo' id="dowDrink"> Things to drink</th>
                        <th class='barInfo' id="dowFood"> Things to eat</th>
                    </tr>
                </table>
            <a href='" . $row["profile_page"] . "'> More Info </a>
            <hr>
            </div>
        }
    }
?>

//ajax (its the same code with the names switched out for monday-sunday)
 $("#monday").click(function() {
    var monday = true;
    $.ajax({
        type: "POST",
        dataType: "html",
        url: "barMapPhp.php",
        data: {monday: monday},
        success: function(result){
        jQuery("#dowd").html(result);
        }
      });
  });

// php code that ajax is sent to but im unsure how to proceed from here if i cant specify which $row["bar_name"] div that the button was in

if(isset($_POST["monday"])){
        ???
    }

Answer 1

Вы можете найти контейнер, который соответствует данному селектору, не зная html-структуру, используя .closest().

Кроме того, вам вообще не нужно несколько функций для каждого дня, вы можете вычислить день по названию кнопки с учетом ваших настроек. Но будьте осторожны, атрибуты id должны быть уникальными, даже если это работает, вы должны это исправить, возможно, вместо этого используйте атрибут data.

Если у вас много элементов, вы должны использовать Делегирование события .

$(document).on('click', 'button', function() {
  let div = this.closest('div').id;
  let data = {};
  data[this.id] = true;
  console.log(`clicked ${this.id} inside div ${div}`);
  console.log(data);   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='div1'>
  <h3 id='barTitle' class='bar'>Bar name</h3>
  <button id='monday'> Monday </button>
  <button id='tuesday'> Tuesday </button>
  <button id='wednesday'> Wednesday </button>
  <button id='thursday'> Thursday </button>
  <button id='friday'> Friday </button>
  <button id='saturday'> Saturday </button>
  <button id='sunday'> Sunday </button>
</div>
<div id='div2'>
  <h3 id='barTitle' class='bar'>Bar name</h3>
  <button id='monday'> Monday </button>
  <button id='tuesday'> Tuesday </button>
  <button id='wednesday'> Wednesday </button>
  <button id='thursday'> Thursday </button>
  <button id='friday'> Friday </button>
  <button id='saturday'> Saturday </button>
  <button id='sunday'> Sunday </button>
</div>

Answer 2

Если у вас несколько кнопок понедельника, используйте класс, например .monday, вместо идентификатора для доступа к кнопке (на одной странице не должно быть нескольких элементов с одинаковым идентификатором. Чтобы идентифицировать конкретную кнопку

1. Добавьте имя бара к кнопке в качестве атрибута bar_name="" и получите к нему доступ, используя $(this).attr('bar_name') в функции обратного вызова jQuery .click().

2. Используйте метод jQuery .parent(), чтобы найти родительский элемент <div> кнопки и извлечь ее атрибут id (bar_name):

   .....

   $ ( 'понедельник ') родитель () родитель () родитель () родителя () атр (' ID');