我正在建立一个企业列表网站,并从数据库中获取所有数据。问题是,如果我为所有框统一编写一个函数,只有第一个具有指定id的框可以工作。所以我用下面的代码来完成这项工作。
<?php
if(is_array($fetchData)){
$sn=1;
foreach($fetchData as $data){
?>
<div class="content">
<div id= <?php echo $data['id']??''; ?> class="business" style="border: 1px solid rgb(0, 0, 0);height: 100px;width: 400px;padding: 2px;overflow: hidden;">
<container class="boxholder1">
<div class="box1">
<div id="titleLine">
<p><img class="brandlogo" src="image/logo.png" alt=""</p>
<p class="brandname"><?php echo $data['businessname']??''; ?></p>
</div>
)
<div id="datas"><div id="list">
<p>County:<?php echo $data['county']??''; ?></p>
<p>CITY: <?php echo $data['city']??''; ?></p>
<p>Phone: <?php echo $data['phone']??''; ?></p>
<p>EMAIL: <?php echo $data['email']??''; ?></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#<?php echo $data['id']??''; ?>").click(function(){
if($("#<?php echo $data['id']??''; ?>").css('height') === "500px")
$("#<?php echo $data['id']??''; ?>").css('height', '100px');
else
$("#<?php echo $data['id']??''; ?>").css('height', '500px');
})
$("#<?php echo $data['id']??''; ?>").click(function(){
if($("#<?php echo $data['id']??''; ?>").css('width') === "800px")
$("#<?php echo $data['id']??''; ?>").css('width', '400px');
else
$("#<?php echo $data['id']??''; ?>").css('width', '800px');
})
</script>
</div>
<?php
$sn++;}}else{ ?>
<?php
}?>
令人惊讶的是,它完美地实现了它的目的,框可以按照我想要的方式显示,并且这个功能对每个框都很有效。但是现在我想通过位置等过滤框,并且不能真正得到一个解决方案。
我尝试了多种过滤方法,但没有一种真正有效,因为我不能引用所有的框。这就是为什么我需要一个更简单的解决方案来显示它们或过滤的工作解决方案。我的一次过滤尝试是这样的:
$('#dropdowncounty').on('change', function(){
$('.business').each(function(){
var e = document.getElementById("dropdown");
var value = e.value;
$('.business').each(function(){
if (county == $(value)) {
$(this).show();
} else if (county !== $(value)){
$(this).hide();
}
})});
我最好保持同样的概念与可扩展的方块。任何想法是高度赞赏!
1条答案
按热度按时间2ic8powd1#
您可以将代码简化为如下形式
演示