如何更简单地从PHP中获取数据,或者如何过滤我得到的数据?

uoifb46i  于 2023-02-28  发布在  PHP
关注(0)|答案(1)|浏览(70)

我正在建立一个企业列表网站,并从数据库中获取所有数据。问题是,如果我为所有框统一编写一个函数,只有第一个具有指定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();
                    
                }  
    })});

我最好保持同样的概念与可扩展的方块。任何想法是高度赞赏!

2ic8powd

2ic8powd1#

您可以将代码简化为如下形式

<select id="dropdowncounty">
    <option></option>
    <option value="county1">county1</option>
    <option value="county2">county2</option>
</select>

<?php
    if(is_array($fetchData)){
        foreach($fetchData as $data){
?>
<div class="business" style="border: 1px solid rgb(0, 0, 0);height: 100px;width: 400px;padding: 2px;overflow: hidden;">
    <div>
        <p><img class="brandlogo" src="image/logo.png" alt=""></p>
        <p class="brandname"><?= $data['businessname'] ?? ''; ?></p>
    </div>
    <div>
        <p class="county">County: <?= $data['county'] ?? ''; ?></p>
        <p class="city">City: <?= $data['city'] ?? ''; ?></p>
        <p class="phone">Phone: <?= $data['phone'] ?? ''; ?></p>
        <p class="email">Email: <?= $data['email'] ?? ''; ?></p>
    </div>
</div>
<?php }}else{ ?>

<?php } ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
<script>
    $(".business").click(function(){
        var height = $(this).css('height') === "500px" ? "100px" : "500px";
        var width  = $(this).css('width') === "800px" ? "400px" : "800px";

        $(this).css('height', height);
        $(this).css('width', width);
    });

    $('#dropdowncounty').on('change', function(){
        var county = $(this).val();

        if (county == '') {
            $('.business').show();
        } else {
            $('.business').hide(); // hide all
            $('.business .county').filter(':contains('+county+')').closest('.business').show(); // show only matched records
        }
    });
</script>

演示

<select id="dropdowncounty">
    <option></option>
    <option value="county1">county1</option>
    <option value="county2">county2</option>
</select>

<div class="business" style="border: 1px solid rgb(0, 0, 0);height: 100px;width: 400px;padding: 2px;overflow: hidden;">
    <div>
        <p><img class="brandlogo" src="image/logo.png" alt=""></p>
        <p class="brandname">Business 1</p>
    </div>
    <div>
        <p class="county">County: county1</p>
        <p class="city">City: city</p>
        <p class="phone">Phone: phone</p>
        <p class="email">Email: email</p>
    </div>
</div>
<div class="business" style="border: 1px solid rgb(0, 0, 0);height: 100px;width: 400px;padding: 2px;overflow: hidden;">
    <div>
        <p><img class="brandlogo" src="image/logo.png" alt=""></p>
        <p class="brandname">Business 2</p>
    </div>
    <div>
        <p class="county">County: county2</p>
        <p class="city">City: city</p>
        <p class="phone">Phone: phone</p>
        <p class="email">Email: email</p>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
<script>
    $(".business").click(function(){
        var height = $(this).css('height') === "500px" ? "100px" : "500px";
        var width  = $(this).css('width') === "800px" ? "400px" : "800px";

        $(this).css('height', height);
        $(this).css('width', width);
    });

    $('#dropdowncounty').on('change', function(){
        var county = $(this).val();

        if (county == '') {
            $('.business').show();
        } else {
            $('.business').hide(); // hide all
            $('.business .county').filter(':contains('+county+')').closest('.business').show(); // show only matched records
        }
    });
</script>

相关问题