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

我有一个问题。例如，我有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>

这是用户在线div，当我单击任何名称时，我想要很多名称名称推送到收件人div 如何制作我是 PHP 的新手

你可以用Javascript和HTML的组合来做到这一点。方法如下：

HTML， CSS & 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>

在这里测试并摆弄它

https://jsfiddle.net/7eres0L0/

相关内容

最新更新

热门标签：