时间戳

首页 > 解决方案 > 如何制作一个完整的

可选择的？

javascript - 如何制作一个完整的
可选择的？

问题描述

我看过一些关于使整个 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>

我对如何解决这个问题有一些想法，但在大多数情况下，我很困惑。

  1. 将 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 等等，使特定数据可显示。

  1. 我的另一个想法是使用 Javascript 使每个选项都可以选择，但我对这种方法没有太多的运气。如您所见，我希望可选择的 div 的 class="even" 的 ID 等于该 mySQL 行的主键。这里的想法是让我可以执行以下操作：
"<script type="text/javascript">
$( "#" . $row['pKey'] . "" ).focus(function() {"
    $imglink = $row['image'];
"});
</script>"

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

我在哪里错了？任何指示或更好的方法来解决这个问题？

标签： javascriptphphtmlcssmysql

解决方案

将您的逻辑与演示文稿分开：

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

<?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 —&gt;

<!— BTW, it’s OK to use tables for tabular data!  Really! —&gt;
<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>
     ...

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

  1. 使用 ajax
  2. 在 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。

未完待续...

推荐阅读