push item to div из списка div

-2

У меня есть вопрос. У меня есть, например, список div, я просто хочу, чтобы все эти погружения были доступны для просмотра. И после нажатия на div значение из div должно быть нажато на другой div. Как я могу это сделать наилучшим образом?push item to 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 ДИВ, в котором многие называют являюсь я хочу, когда я нажимаю на любом имя имени нажатия на Reciver DIV как сделал это я новичок в PHP

источник

2016-05-29 Malik

Я не думаю, что это может быть сделано в php. Вам, вероятно, понадобится что-то вроде JavaScript –

, пожалуйста, отредактируйте мой код, как я могу это сделать с помощью javascript – Malik

И что вы пробовали до сих пор? И почему это не сработало? Это было бы прекрасным местом для начала. –

Вы можете сделать это с помощью комбинации 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

push item to div из списка div

ответ

Смежные вопросы