將項目從div列表中推送到div

-2

我有一個問題。我有例如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>

這裏是許多名字是我想要當我在任何名稱推送名稱點擊reciver DIV如何使它我在PHP是新

來源

2016-05-29 Malik

我不認爲這可以做到單獨的PHP。你可能需要像JavaScript一樣的東西 –

你會請編輯我的代碼我怎麼能用javascript做到這一點 – Malik

你到目前爲止嘗試過什麼？爲什麼它不工作？那將是一個開始的好地方。 –

您可以用組合做useronline DIV 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>

測試與它& FIDDLE這裏

https://jsfiddle.net/7eres0L0/

來源

2016-05-29 15:15:01 Poiz

但在我的情況下名稱來自數據庫，這將是增加或減少我怎麼能做到這一點？ – Malik

@Malik沒問題......原理完全一樣......我們只是模擬了一個名稱數組，因爲我們沒有數據庫。只複製上面的HTML，CSS和JAVASCRIPT **部分，它仍然可以正常工作...因爲這裏的數組也被稱爲$ result ...我們現在已經更新了HTML，使其看起來完全像您的。 – Poiz

它的工作，但問題是這個我只想當我點擊項目時，它會顯示只有該項目，當我點擊一個項目它顯示罰款，但是當我點擊其他項目將被取代 – Malik

將項目從div列表中推送到div

回答

相關問題