Question

我有一个问题。我有例如div的列表，我只想要所有这些潜水都应该是可点击的。单击div后，div中的值应推送到另一个div上。我怎么能以最好的方式做到这一点？

    <?php
define('HOST','xxxx');
define('USER','xxx');
define('PASS','xxxx');
define('DB','xxxxx');

$con = mysqli_connect(HOST,USER,PASS,DB);

$sql = "select * from users";

$res = mysqli_query($con,$sql);
$result = array();

    while($row = mysqli_fetch_array($res)){
    array_push($result,
    array(
      'email'=>$row[3], 
));
} 
echo json_encode(array("result"=>$result));
mysqli_close($con);

?>
<html>
<head>
<style>
#usersOnLine { 
    font-family:tahoma;
    font-size:12px;
    color:black;
    border: 3px teal solid;
    height: 525px;
    width: 250px;
    float: right;
 overflow-y:scroll;
}

.container{
    width:970px;
    height:auto;
    margin:0 auto;
}
</style>
</head>
<body>
<div class="container"> 
<div id="reciver"><h3>reciver</h3></div>
<div id="sender"><h3>sender</h3></div>
<h2 align="right"> all contacts </h2>
<div id="usersOnLine">
<?php
foreach($result as $key => $val)
{
    echo $val['email'];
    echo "<br>";
}
 ?>
</div>
</div>
</body>
</html>

这里是useronline div，当我点击任何名称时，我想要许多名称推送给reciver如何使它成为我在php中的新手

Answer 1

您可以使用Javascript和HTML的组合来完成它。以下是如何：

HTML，CSS＆amp; JAVASCRIPT - JQUERY

        <!-- HTML-->
        <html>
        <head>

        <!-- CSS-->
            <style>
                #usersOnLine {
                    font-family:tahoma;
                    font-size:12px;
                    color:black;
                    border: 3px teal solid;
                    height: 525px;
                    width: 250px;
                    float: right;
                    overflow-y:scroll;
                    padding: 10px;
                }

                .container{
                    width:970px;
                    height:auto;
                    margin:0 auto;
                }

                .clickAble{
                    display: inline-block;;
                    cursor:pointer;     /* <== TO INDICATE TO USER THAT THIS IS CLICKABLE... */
                }
            </style>
        </head>

        <!-- HTML CONTENT -->
        <body>
        <div class="container">
            <div id="receiver">
                <h3>receiver</h3>
                <!-- NOTICE THAT THIS IS NEW NOW... -->
                <!-- IT'S IMPORTANT THAT YOU HAVE THIS PARAGRAPH EXACTLY AS IT IS HERE -->
                <p class='bubbled-data'></p>
            </div>
            <div id="sender"><h3>sender</h3></div>
            <h2 align="right"> all contacts </h2>
            <div id="usersOnLine">
                <?php
                    foreach($result as $key => $val){
                        echo "<span class='clickAble'>" . $val['email'] . "</span><br />";
                    }
                ?>
            </div>

            <!-- THE FORM -->               
            <form id="messageForm" action="<?php echo $_PHP_SELF; ?>" method="POST" >
                <input type="text" name="data" id="message" placeholder="message" onFocus="fun1(this)" onBlur="fun2(this)" required="" /><br /><br />
                <!-- NOTICE THAT WE ADDED A HIDDEN FIELD TO HOLD THE DATA -->
                <input type="hidden" name="user_data" id="user_data" value="">
                <input id="send" type="submit" value="Send">
            </form>
        </div>

        <!-- JAVASCRIPT - JQUERY -->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
        <script type="text/javascript">

            (function ($) {
                $(document).ready(function (e) {
                    var receiver    = $("#receiver");
                    var clickAbles  = $(".clickAble");

                    // BIND THE clickAble SPAN TO AN ON-CLICK EVENT...
                    // SO THAT WITH EACH CLICK, YOU CAN SIMPLE APPEND THE CONTENT OF THAT SPAN TO THE RECEIVER DIV
                    clickAbles.on("click", function(evt){
                        var nameValue       = $(this).text();
                        receiver.find(".bubbled-data").text(nameValue);

                        // ADD THE SAME VALUE TO THE HIDDEN INPUT ELEMENT: #user_data
                        $("#user_data").val(nameValue);
                    });



                });
            })(jQuery);
        </script>

        </body>
        </html>

TEST＆amp;这里有它的好消息

https://jsfiddle.net/7eres0L0/

将项目推送到项目div列表中的div

1 个答案: