如何使整个 <div> 可选？

Posted 2023-02-24

技术标签:

【中文标题】如何使整个 <div> 可选？【英文标题】：How to make an entire <div> selectable? 【发布时间】：2020-04-24 13:11:24 【问题描述】：

我看过几篇关于让整个 div 可点击的帖子，但我希望让它成为可选的。

我有一个 php while 循环，它根据用户输入到 mysql 数据库中显示一个表。该代码如下所示：

  <div class='tracksub'>
    <div class='headname'><div class='headtext'>Name</div></div>
    <div class='headtype'><div class='headtext'>Type</div></div>
    <div class='headbrand'><div class='headtext'>Brand</div></div>
    <div class='headedp'><div class='headtext'>EDP</div></div>
    <div class='headdiameter'><div class='headtext'>Diameter</div></div>
    <div class='headflutes'><div class='headtext'>Flutes</div></div>
    <!-- <div class='headaddremove'><div class='headtext'>Add/Remove Tool</div></div> -->
</div>";

    $i = 0;

    while($row = mysqli_fetch_assoc($resulttable))
        if($i%2 == 0)

            echo "<div class='even' id='" . $row['pKey'] . "'>";
            echo "<div class='name'><div class='tracktext'><a class='tracklink'>" . $row['name'] . "</a></div></div>";
            echo "<div class='type'><div class='tracktext'>" . $row['type'] . "</div></div>";
            echo "<div class='brand'><div class='tracktext'>" . $row['brand'] . "</div></div>";
            echo "<div class='edp'><div class='tracktext'>" . $row['part_number'] . "</div></div>";
            echo "<div class='diameter'><div class='tracktext'>" . $row['cutting_diam'] . "</div></div>";
            echo "<div class='flutes'><div class='tracktext'>" . $row['flutes'] . "</div></div>";
            //echo "<div class='addremove'><form id='addremove' method='POST' action=''><button type='submit' class='addbtn' name='add" . $row['pKey'] . "'>Add</button><button type='submit' class='removebtn' name='remove" . $row['pKey'] . "'>Remove</button></form></div>";
            echo "</div>"; 

         else 
            echo "<div class='odd'>";
            echo "<div class='name'><div class='tracktext'><a href='" . $row['image'] . "'>" . $row['name'] . "</a></div></div>";
            echo "<div class='type'><div class='tracktext'>" . $row['type'] . "</div></div>";
            echo "<div class='brand'><div class='tracktext'>" . $row['brand'] . "</div></div>";
            echo "<div class='edp'><div class='tracktext'>" . $row['part_number'] . "</div></div>";
            echo "<div class='diameter'><div class='tracktext'>" . $row['cutting_diam'] . "</div></div>";
            echo "<div class='flutes'><div class='tracktext'>" . $row['flutes'] . "</div></div>";
            //echo "<div class='addremove'><form id='addremove' method='POST' action=''><button type='submit' class='addbtn' name='add" . $row['pKey'] . "'>Add</button><button type='submit' class='removebtn' name='remove" . $row['pKey'] . "'>Remove</button></form></div>";
            echo "</div>";
        

        if(isset($_POST['add' . $row['pKey'] .'']))
            $add = $row['pKey'];
            $sql = "UPDATE `cutting tools` SET `qty` = `qty` + 1 WHERE `pKey` = '$add'";
            $conn->query($sql);
        
        if(isset($_POST['remove' . $row['pKey'] .'']))
            $remove = $row['pKey'];
            $sql = "UPDATE `cutting tools` SET `qty` = `qty` - 1 WHERE `pKey` = '$remove'";
            $conn->query($sql);
        
        $i++;
    
    echo "</div>";

我想选择的 div 是 class="even" 和 class="odd" （每一个都是相同的，每一行都有一个交替的背景颜色）。当用户选择此整行时，我想显示 mySQL 表中未显示在选择条目的表中的某些数据。布局看起来像这样：

<div class="rightbox">
     <div class="tbdrawer">
     </div>
     <div class="bininfo">
     <div>
     <div class="toolimg">
          <img src="" /> <!--src comes from selected mySQL row -->
     </div>
     <div class="toolinfoextra">
          <!-- a couple rows of additional info go here -->
     </div>
</div>

我对如何解决这个问题有一些想法，但大多数情况下我都被难住了。

将 class="odd" 和 class="even" 内容放入提交按钮并删除所有格式 - 实质上使按钮不可见。通过这种方式，我可以跟踪按下了哪个按钮并显示其余数据：

if(isset($_POST['. $row['pKey'] .'])) //where the buttons name is the primary key
   $imglink = $row['image'];
   $length = $row['length'];

我想显示的每条数据等等。然后在每个 div 中，我可以回显 $length 等等，使特定数据可显示。

javascript

"<script type="text/javascript">
$( "#" . $row['pKey'] . "" ).focus(function() "
    $imglink = $row['image'];
");
</script>"

然后基本上做与 PHP 方法相同的操作，其中每个 div 都在回显仅在选择行时才填充的变量。

我哪里错了？有什么建议或更好的方法吗？

【问题讨论】：

看起来您正在使用 jQuery，因此无需生成多个 <script> 标签。相反，只需生成一个脚本标签，为所有<div> 标签设置点击处理程序。理想情况下它会这样做onready。另外，当你想要click 时，为什么要使用focus 事件？ @kmoser 对使用 JS 和 JQuery 不是很有经验，所以这是我在卡住之前拼凑起来的，所以这就是为什么使用焦点而不是点击的原因.. 您能解释一下可点击和可选择之间的细微差别吗？通过将 jquery 事件侦听器放在类上，您可以轻松地使行可点击。另外，您能解释一下lightbox 的位置吗？它只是一次，还是每一行的一部分？代码结构错误。您不应该将if(isset($_POST) 行放在while 循环中。您应该将它作为函数放在代码的顶部，并通过 POST 请求/jQuery AJAX 请求使其可查询。 @raptor 我不同意 - 该表为 mySQL 表中的每个单独条目生成按钮，将这些数据放在 while 循环中检查该特定行的每个按钮，以便我知道哪个被按下是因为主键该行用作按钮 ID。但这无关紧要，两个按钮都在表格之外移动，因此无论如何这些代码行都会被删除。 【参考方案1】：

这是一种错误的做法——你应该这样做：

<ul>
  <?php
    $i = 0;
    while($row = mysqli_fetch_assoc($resulttable))
      echo<<<END

        <a class="table-link" id="$i" href="#">
END;
        if(i%2==0)
          echo "<li class='odd'>";
         else 
          echo "<li class='even'>";
        
        echo <<< END
            ...
            (here all div's)
            ...
          </li>
        </a>
        <div id="modal-$i" class="rightbox">
          <div class="tbdrawer">
          </div>
          <div class="bininfo">
            <div>
              <div class="toolimg">
                <img src="" /> <!--src comes from selected mySQL row -->
              </div>
              <div class="toolinfoextra">
                <!-- a couple rows of additional info go here -->
              </div>
            </div>
          </div>
        </div>

END;
      i++;
    
  ?>
</ul>

css:

a.table-link:hover 
  opacity: 0.8; // for e.g.


a.table-link:clicked 
  background-color: blue;


.rightbox 
  display: none;


.show 
  display: block;
  position: relative;
  z-index: 1000;
  top: 50px;
  background-color: white;

还有js：

for(el in document.getElementsByClassName('table-link')) 
  el.onclick = () => 
    document.getElementById('modal-$i')[0].classes.add('show')

    return false  // for cancel redirecting of href

这应该更适合你。您需要在某处添加按钮，该按钮将具有事件onclick，这将从您的模式中删除类show。

【讨论】：

【参考方案2】：

将你的逻辑与演示分开：

将您的脚本放入这种标准格式可以避免很多心痛，并且帮助可以防止编写意大利面条式代码

<?php
// all processing of user input, database access, and business logic happens here

// initialize database connection here, proper connection left to reader 
$pdo = new PDO($dsn, $user, $pass, $options);

// This is an example of PRG (Post-Redirect-Get) pattern.  This eliminates resubmissions and back button traps
// this section roughly corresponds to the controller in MVC
if(isset($_POST['add'))
    $sql = "UPDATE `cutting tools` SET `qty` = `qty` + 1 WHERE `pKey` = ?";
    $pdo->prepare($sql);
    $pdo->execute ($_POST['id']);
    header('Location: /';
    die;


if(isset($_POST['remove'))
    $sql = "UPDATE `cutting tools` SET `qty` = `qty` - 1 WHERE `pKey` = ?";
    $pdo->prepare($sql);
    $pdo->execute ($_POST['id']);
    header('Location: /';
    die;
                              

// code to get $resultTable...

// all done with logic, now show view, using php only as necessary for looping and filling in data
?>
<html>
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <!— snip —>

<!— BTW, it’s OK to use tables for tabular data!  Really! —>
<div class='tracksub'>
  <div class='headname'>
    <div class='headtext'>Name</div>
  </div>
  <div class='headtype'>
    <div class='headtext'>Type</div>
  </div>
  <div class='headbrand'>
    <div class='headtext'>Brand</div>
  </div>
  <div class='headedp'><div class='headtext'>EDP</div></div>
  <div class='headdiameter'>
    <div class='headtext'>Diameter</div>
  </div>
  <div class='headflutes'>
    <div class='headtext'>Flutes</div>
  </div>
  <!-- <div class='headaddremove'><div class='headtext'>Add/Remove Tool</div></div> -->
</div>

<?php $evenOdd = 'even'; ?>
<?php while($row = mysqli_fetch_assoc($resulttable)):?>
  <div 
    class="<?= $evenOdd == 'even' ? 'odd' : 'even' ?>" 
    data-id="<?=$row['pKey']?>" 
    >
    <div class="name">
      <div class="tracktext"><a class="tracklink"><?=$row['name']?></a></div>
    </div>
    <div class="type">
      <div class="tracktext"><?=$row['type']?></div>
    </div>
    <div class="brand">
      <div class="tracktext"><?=$row['brand']?></div>
    </div>
    <div class="edp">
      <div class='tracktext'><?=$row['part_number']?></div>
    </div>
    <div class='diameter'>
      <div class='tracktext'><?=$row['cutting_diam']?></div>
    </div>
    <div class='flutes'>
      <div class='tracktext'><?=$row['flutes']?></div>
    </div>
    <div class='addremove'>
      <form id='addremove' method='POST' action=''>

        <input type="hidden" name="id" value="<?=$row['pKey']?>" >
        <button type='submit' class='addbtn' name='add'>Add</button><button type='submit' class='removebtn' name='remove'>Remove</button>
      </form>
    </div>
<?php endwhile; ?>

添加 Javascript (JQuery)

现在演示与 PHP 逻辑分离，使用 HTML/JavaScript 脚本更容易。您不必为进出引号、单引号与双引号以及您正在做的事情之间的数英里代码而烦恼。

添加 Jquery：

<html>
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     ...

至少有两种方法可以解决这个问题：

使用 ajax 在 while 循环中显示和隐藏数据

本示例将使用第二种方法，并假设您要使用容器，

<div class="rightbox">
    <div class="tbdrawer">
    </div>
    <div class="bininfo">
    <div>
    <div class="toolimg">
      <img src="" /> <!--src comes from selected mySQL row -->
    </div>
    <div class="toolinfoextra">
      <!-- a couple rows of additional info go here -->
    </div>
</div>

将一个类 (tableRow) 添加到您的偶数/奇数 div 以用作挂钩：

  <div 
    class="table-row <?= $evenOdd == 'even' ? 'odd' : 'even' ?>" 
    data-id="<?=$row['pKey']?>" 
    >

我之前输入属性 data-id 希望使用 ajax，但现在，只需为图像添加一个 data-image-src：

  <div 
    class="table-row <?= $evenOdd == 'even' ? 'odd' : 'even' ?>" 
    data-id="<?=$row['pKey']?>"
    data-image-src="<?=$row['image']?>" 
    >

现在在页面底部，添加一个事件监听器

<script>
  $(document).ready(function() 

    $('.table-row').on('click', function() 
      console.log( $(this).data('image');
    );
  
</script>

当您单击一行时，您应该会在浏览器控制台中看到图像 url。

待续……

【讨论】：

【参考方案3】：

我设法提出了一个解决方案，它完全不使用 JavaScript 来满足我的需求 - 所有 PHP、HTML 和 CSS。

就像我在问题中提到的那样，我决定尝试将行放在“不可见”提交按钮中。这比我想象的要好，看起来像这样：

while($row = mysqli_fetch_assoc($resulttable))
                                    if($i%2 == 0)

                                        echo "<div class='even'><form method='POST'><button class='rowbtn' name='row" . $row['pKey'] . "'>";
                                        echo "<div class='name'><div class='tracktext'>" . $row['name'] . "</div></div>";
                                        echo "<div class='type'><div class='tracktext'>" . $row['type'] . "</div></div>";
                                        echo "<div class='brand'><div class='tracktext'>" . $row['brand'] . "</div></div>";
                                        echo "<div class='edp'><div class='tracktext'>" . $row['part_number'] . "</div></div>";
                                        echo "<div class='diameter'><div class='tracktext'>" . $row['cutting_diam'] . "</div></div>";
                                        echo "<div class='flutes'><div class='tracktext'>" . $row['flutes'] . "</div></div>";
                                        //echo "<div class='addremove'><form id='addremove' method='POST' action=''><button type='submit' class='addbtn' name='add" . $row['pKey'] . "'>Add</button><button type='submit' class='removebtn' name='remove" . $row['pKey'] . "'>Remove</button></form></div>";
                                        echo "</button></form></div>"; 

                                     else 
                                        echo "<div class='odd'>";
                                        echo "<div class='name'><div class='tracktext'>" . $row['name'] . "</div></div>";
                                        echo "<div class='type'><div class='tracktext'>" . $row['type'] . "</div></div>";
                                        echo "<div class='brand'><div class='tracktext'>" . $row['brand'] . "</div></div>";
                                        echo "<div class='edp'><div class='tracktext'>" . $row['part_number'] . "</div></div>";
                                        echo "<div class='diameter'><div class='tracktext'>" . $row['cutting_diam'] . "</div></div>";
                                        echo "<div class='flutes'><div class='tracktext'>" . $row['flutes'] . "</div></div>";
                                        //echo "<div class='addremove'><form id='addremove' method='POST' action=''><button type='submit' class='addbtn' name='add" . $row['pKey'] . "'>Add</button><button type='submit' class='removebtn' name='remove" . $row['pKey'] . "'>Remove</button></form></div>";
                                        echo "</div>";
                                    

                                    if(isset($_POST['add' . $row['pKey'] .'']))
                                        $add = $row['pKey'];
                                        $sql = "UPDATE `cutting tools` SET `qty` = `qty` + 1 WHERE `pKey` = '$add'";
                                        $conn->query($sql);
                                    
                                    if(isset($_POST['remove' . $row['pKey'] .'']))
                                        $remove = $row['pKey'];
                                        $sql = "UPDATE `cutting tools` SET `qty` = `qty` - 1 WHERE `pKey` = '$remove'";
                                        $conn->query($sql);
                                    
                                    if(isset($_POST['row' . $row['pKey'] .'']))
                                        echo $row['pKey']; //just for testing
                                        $infoname = $row['name'];
                                    
                                    $i++;

其中每一行都有一个单独的按钮，其中按钮的名称是 row"pKey"（例如 row43）按钮的格式如下所示：

.rowbtn
    width:100%;
    height:100%;
    border:none;
    background: transparent;
    cursor: pointer;

然后它就像设置一个变量等于我需要在if(isset()) 内部使用的mySQL $row['tableheadername'] 并在页面开头的正确div 中回显该变量一样简单。对于每个人来说，它可能不是一个完美的解决方案，但它确实可以很好地满足我的需要，并且不需要我将 JS 引入页面。

您还会注意到我只更新了 .even 行，我只需在完成格式化后将其复制到奇数行，但两者在其他方面是相同的。

编辑：来自所选行的所有数据都必须在代码中的 mySQL 表之后。例如：

<div class="leftbox">
    This is the div that contains all of my filters and table, seen above
</div>
<div class="rightbox">
    <?php echo $infoname; ?>
    This div echoes info specific to the clicked table row - and CANNOT be above 
    the "leftbox" div in the code
</div>

【讨论】：

以上是关于如何使整个 <div> 可选？的主要内容，如果未能解决你的问题，请参考以下文章

如何使DIV的高度固定，当超出固定高度时，让文字自动上下循环滚动

Css使Div自适应居中

如何使 <div> 完全填满浏览器窗口，包括截至 2019 年的 Mobile Safari

如何使表格中只有一列可选？

如何使 URL 参数匹配可选[重复]

html的一个DIV样式，如何使内容滚动条隐藏，但依旧可以滚动？