只打开div我想要的(jquery)

Question

标题可能具有误导性，但我会尽力解释。 My table of users 当我点击十字架时，我只想打开 div 和 id 例如 # in table(id=1, id=2...)

所以这是我的 php 代码：

$select = "SELECT ... from ...";
$data = mysqli_query($connect, $select);
$count = 0;
echo "<table>
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>";
while ($query = mysqli_fetch_array($data)) {
            $counter++;
            echo "<tr>
            <th>{$counter}</th>
            <td>{$query["name"]}</td>
            <td><a href='xxx.php?id={$query["id"]}'><i class='ion-edit'></i></a><i class='ion-close-round'></i>
<div class='modal'> //modal have of course display none!
  <div class='mContent'>
    <div class='mHeader'>
      <h2>Modal Header</h2>
    </div>
    <div class='mMiddle'>
      <a href='xxx.php?id={$query['id']}'>delete</a>
    </div>
    <div class='modal-footer'>
      <h3>Modal Footer</h3>
    </div>
  </div>
</div></td></tr>";
}
echo "</table>\n";

Jquery:

$('.ion-close-round').on('click', function () {
 $('.modal').css("display", "block");
});

这个脚本 "open" 当然是每个模态，但我只想打开具有给定 id

的模态

感谢大家的帮助

Answer 1

选择器。是一个 class 选择器。

您想使用 ID 选择器#

ID 选择器更严格，因为 HTML 页面上只有一个元素可以具有给定的 ID，因此您的 ID 是 'modal'，它只适用于 ID 为模态。

Answer 2

您可以使用 $.next() 定位 .ion-close-round

之后的 .modal

$('.ion-close-round').on('click', function () {
 $(this).next('.modal').css("display", "block");
});

只打开div我想要的(jquery)

Open only div what i want(jquery)

css

php

jquery

modal-dialog

display