如何使整个 <div> 可选?

Posted

技术标签:

【中文标题】如何使整个 <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 使每个选项都可以选择,但我对这种方法不太满意。如您所见,我希望可选择的 div 的 class="even" 的 ID 等于该 mySQL 行的主键。这里的想法是让我可以做到以下几点:
"<script type="text/javascript">
$( "#" . $row['pKey'] . "" ).focus(function() "
    $imglink = $row['image'];
");
</script>"

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

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

【问题讨论】:

看起来您正在使用 jQuery,因此无需生成多个 &lt;script&gt; 标签。相反,只需生成一个脚本标签,为所有&lt;div&gt; 标签设置点击处理程序。理想情况下它会这样做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样式,如何使内容滚动条隐藏,但依旧可以滚动?