如何使整个 <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,因此无需生成多个<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的高度固定,当超出固定高度时,让文字自动上下循环滚动