Question

当我点击“点击我”按钮时，所选的ID将打印到var divtest，然后在<div id="container">中淡出，当我点击另一个按钮时点击我“它只获得第一个ID，但我想要的只是数据库中要显示的第二个ID。如果我尝试删除所选描述，它将返回ID描述的容器。

我的数据库样本。

ID Description    
1    Hello
2    Hi
3    Thank You

这是我的示例代码。

<?php 
    $conn = mysqli_connect("localhost", "root", "","dblaquaresort") or die("Failed to Connect");
    $sql = "SELECT * FROM tblsample";
    $query =  mysqli_query($conn, $sql);
    while ($sample = mysqli_fetch_array($query)) 
    {
    ?><div id="container">
    <label id="ID">ID: <?php echo $sample['ID']; ?></label>
    <label id="Description">Description: <?php echo $sample['Description']; ?></label>
    <button type="button" id="more_fields" onclick="add_fields();">Click me</button> </div>
    <?php
    }
    ?>

    <div id="room_fileds">
     <div>
       <div class="content">
         <?php
              function not_empty_string($s) 
              {
                return $s !== " ";
              }
              $pieces = array_filter(explode(",", "Test"),'not_empty_string');
              foreach ($pieces as $piece) 
              {
               $test_stinga = array_filter(explode("-", $piece),'not_empty_string');
               $test_stinga=preg_replace('/\s+/', '', $test_stinga);
              }
             ?>
      </div>
     </div>
    </div>
            <script>
                var room = 1;
                var wrapper = $(".testtt");
                function add_fields() 
                {
                room++;
                var objTo = document.getElementById('room_fileds');
                var ID = document.getElementById('ID').innerHTML;
                var Desc = document.getElementById('Description').innerHTML;
                var divtest = document.createElement("div");
                 divtest.innerHTML = '<div class="label">TEST ' + room + ':</div> <div class="content"><span><p class="form-inline">Testing: '+ ID +'</span><span>Description: ' + Desc + '</span><button class="remove"> Remove</button></p></div>';
                   objTo.appendChild(divtest)
                        }
                     $('#room_fileds').on("click",".remove", function(e)
                     {
                     $(this).parents().eq(5).remove();
                     })
                </script>

这是我想要的输出。

Div Container
ID: 1 Description: Hello <button>click me</button>
ID: 2 Description: Hi <button>click me</button>
ID: 3 Description: Thank You <button>click me</button>

如果我点击ID = 2。

Div Container
ID: 1 Description: Hello <button>click me</button>
ID: 3 Description: Thank You <button>click me</button>

Divtest
ID: 2 Description: Hi <button>Remove</button>

如果我点击删除它将返回 Div容器。

ID: 1 Description: Hello <button>click me</button>
ID: 2 Description: Hi <button>click me</button>
ID: 3 Description: Thank You <button>click me</button>

Answer 1

您在此循环中为HTML元素创建了相同的ID次：

while ($sample = mysqli_fetch_array($query))

根据您的示例，此元素<div id="container">将是3次，您需要使每个id不同。您可以使用从数据库中获取的行的Id，以便执行以下操作：

 while ($sample = mysqli_fetch_array($query)) 
    {
    ?><div id="container_<?php echo $sample['ID']; ?>">
    <label id="ID_<?php echo $sample['ID']; ?>">ID: <?php echo $sample['ID']; ?></label>
    ......

因此，当您将这个<?php echo $sample['ID']; ?>添加到您的html ID中时，例如：id="container_<?php echo $sample['ID']; ?>"，您可以为元素创建唯一的ID，您需要这样做才能拥有唯一的html ID。

现在你需要修改你的javascript函数：

function add_fields()

你应该让它得到一个参数，如：

function add_fields(id)

你可以传递行的id，所以它将是：

<button type="button" id="more_fields_<?php echo $sample['ID']; ?>" onclick="add_fields(\"<?php echo $sample['ID']; ?>\");">Click me</button> </div>

并且您需要修改该函数的内容，以使用该id：

  function add_fields(id) 
  {
     room++;
     var objTo = document.getElementById('room_fileds_'+id);
     .....

我希望这会有所帮助。

获取部门内的信息php javascript

1 个答案: