javascript - 如何使整个 可选？

Question

我看过几篇关于使整个 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 中，我可以 echo $length 等使特定数据可显示。

我的另一个想法是使用 Javascript 使每个选项都可以选择，但我对这种方法不太走运。如您所见，我想要选择的 div 的 class="even"的 ID 等于该 mySQL 行的主键。这里的想法是让我可以执行以下操作:

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

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

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

Answer 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从你的模态。