时间戳

首页 > 解决方案 > jQuery代码不适用于php中的每次迭代

php - jQuery代码不适用于php中的每次迭代

问题描述

一旦用户单击“显示电话号码”文本，我一直在添加代码以显示电话号码并隐藏文本“显示电话号码”。

但这仅发生在一次迭代中，例如我有两个用户在说“德里”，Jquery 部分仅适用于第一个用户，而不适用于第二个用户。

PFA jQuery 代码 -

<script>
                $("#hiddenphone").hide();//hide the initial phone number

                $("#showphone").on("click", function (event) {
                        event.stopPropagation();
                        // if .hiddenphone class for this template instance is hidden
                        if ($(this).find('#hiddenphone').is(':hidden')) {
                            // change text
                            $(this).find('#hiddenphone').show();
                            $(this).find('#clickshow').hide()
                        }
                    });       
        </script>

PHP 代码 -

            <?php
            
            $username = "root";
            $password = "";
            $database = "db_name";
            $mysqli = new mysqli("localhost", $username, $password, $database);
            echo '<div id="boxes">';  
                if (!empty($_REQUEST['lsearch'])) {

                $term = $mysqli -> real_escape_string($_REQUEST['lsearch']);
                $query = "SELECT * FROM `therapists` AS `T` inner join `personal details` as `P` ON `T`.`Therapist ID` = `P`.`Therapist ID` WHERE `Location` LIKE '%".$term."%'";
                //echo "<b> <center>Database Output</center> </b> <br> <br>";

                if ($result = $mysqli->query($query)) {
                
                    while ($row = $result->fetch_assoc()) {
                        $field1name = $row["Therapist ID"];
                        $field2name = $row["Name"];
                        $field3name = $row["Designation"];
                        $field4name = $row["Identifies As"];
                        $field5name = $row["Client Group"];
                        $field6name = $row["Languages"];
                        $field7name = $row["Issues Related"];
                        $field8name = $row["Location"];
                        $field9name = $row["Phone Number"];
                        $field10name = $row["Intro"];
                        $field11name = $row["Instagram Link"];
                        $field12name = $row["Linkedin Link"];
                        $field13name = $row["Aasha URL"];
    
                  
                                echo '<div id="square-box">
                                        <div id="intro"><p>';echo $field2name;echo'</p><p>';echo $field3name;echo'</p><p>';echo $field10name;echo'</p><p>';echo $field8name;echo'</p><p></div>
                                        <div id="links"><p>';echo $field13name;echo $field12name;echo $field11name;echo'</p><p id="showphone"><span id="clickshow" style="display: inline;"><b>Show Phone Number</b></span>
                                        <span id="hiddenphone" style="display: none;">
                                                    <span>';echo $field9name;echo'</span>
                                                    
                                        </span></p></div>
                                    </div>';//;echo $field9name;echo
                        //}           
                    }
                
                    /*freeresultset*/
                    $result->free();
                    }
                }
              echo '</div>';    
            ?>

标签： phpjquery

解决方案

        <?php
        
        $username = "root";
        $password = "";
        $database = "db_name";
        $mysqli = new mysqli("localhost", $username, $password, $database);
        echo '<div id="boxes">';  
            if (!empty($_REQUEST['lsearch'])) {

            $term = $mysqli -> real_escape_string($_REQUEST['lsearch']);
            $query = "SELECT * FROM `therapists` AS `T` inner join `personal details` as `P` ON `T`.`Therapist ID` = `P`.`Therapist ID` WHERE `Location` LIKE '%".$term."%'";
            //echo "<b> <center>Database Output</center> </b> <br> <br>";

            if ($result = $mysqli->query($query)) {
            
                while ($row = $result->fetch_assoc()) {
                    $field1name = $row["Therapist ID"];
                    $field2name = $row["Name"];
                    $field3name = $row["Designation"];
                    $field4name = $row["Identifies As"];
                    $field5name = $row["Client Group"];
                    $field6name = $row["Languages"];
                    $field7name = $row["Issues Related"];
                    $field8name = $row["Location"];
                    $field9name = $row["Phone Number"];
                    $field10name = $row["Intro"];
                    $field11name = $row["Instagram Link"];
                    $field12name = $row["Linkedin Link"];
                    $field13name = $row["Aasha URL"];

              
                            echo '<div id="square-box">
                                    <div id="intro"><p>';echo $field2name;echo'</p><p>';echo $field3name;echo'</p><p>';echo $field10name;echo'</p><p>';echo $field8name;echo'</p></div>
                                    <div id="links"><p>';echo $field13name;echo $field12name;echo $field11name;echo'</p><p id="showphone-<?=$field1name?>" onclick="showPhone(<?=$field1name?>)"><span id="clickshow" style="display: inline;"><b>Show Phone Number</b></span></p>
                                    <span class="hiddenphone" id="hiddenphone-<?=$field1name?>" style="display: none;">
                                                <span>';echo $field9name;echo'</span>
                                                
                                    </span></div>
                                </div>';//;echo $field9name;echo
                    //}           
                }
            
                /*freeresultset*/
                $result->free();
                }
            }
          echo '</div>';    
        ?>
$(".hiddenphone").hide();//隐藏初始电话号码函数 showPhone(id) 
    $("#hiddenphone").hide();//hide the initial phone number
    function showPhone(id)
    {
        console.log(id);
        $("#showphone-"+id).hide();
        $("#hiddenphone-"+id).css("display","block");

    }      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boxes">
    <div id="square-box">
                                
        <div id="intro">
            <p>Abhishek</p>
            <p>SSE</p>
            <p>I am abhishek</p>
            <p>Etawah</p>
        </div>
        
        <div id="links">
            <p>URL here</p>
            <p id="showphone-1" onclick="showPhone(1)">
            <span id="clickshow" style="display: inline;">
            <b>Show Phone Number</b>
            </span>
            </p>
            <span id="hiddenphone-1" style="display: none;">
                <span>0000000000</span>
                                                
                </span>
        </div>
    </div>
    <div id="square-box">
                                
        <div id="intro">
            <p>Abhishek</p>
            <p>SSE</p>
            <p>I am abhishek</p>
            <p>Etawah</p>
        </div>
        
        <div id="links">
            <p>URL here</p>
            <p id="showphone-2" onclick="showPhone(2)">
            <span id="clickshow" style="display: inline;">
            <b>Show Phone Number</b>
            </span>
            </p>
            <span id="hiddenphone-2" style="display: none;">
                <span>0000000000</span>
                                                
                </span>
        </div>
    </div>
    <div id="square-box">
                                
        <div id="intro">
            <p>Abhishek</p>
            <p>SSE</p>
            <p>I am abhishek</p>
            <p>Etawah</p>
        </div>
        
        <div id="links">
            <p>URL here</p>
            <p id="showphone-3" onclick="showPhone(3)">
            <span id="clickshow" style="display: inline;">
            <b>Show Phone Number</b>
            </span>
            </p>
            <span id="hiddenphone-3" style="display: none;">
                <span>0000000000</span>
                                                
                </span>
        </div>
    </div>
    <div id="square-box">
                                
        <div id="intro">
            <p>Abhishek</p>
            <p>SSE</p>
            <p>I am abhishek</p>
            <p>Etawah</p>
        </div>
        
        <div id="links">
            <p>URL here</p>
            <p id="showphone-4" onclick="showPhone(4)">
            <span id="clickshow" style="display: inline;">
            <b>Show Phone Number</b>
            </span>
            </p>
            <span id="hiddenphone-4" style="display: none;">
                <span>0000000000</span>
                                                
                </span>
        </div>
    </div>
</div>
{警报（ID）；$("#showphone-"+id).hide(); $("#hiddenphone-"+id).css("display","block"); }

推荐阅读