当页面重新加载数据时,php div项目单击

时间:2016-05-30 10:17:08

标签: javascript php jquery html

我有一个div名称所有联系人,其中有很多名称,当我点击任何名称这个名称显示我在其他div名称接收器其工作罚款问题这是当页面重新加载名称从reciver div,我点击将请你告诉我当页面刷新div数据没有消失时如何制作它,直到我转到其他页面。

#usersOnLine { 

font-family:tahoma;
font-size:12px;
color:black;
border: 3px teal solid;
height: 625px;
width: 300px;
overflow-y:scroll;
}
<div id='receiver'>
<h3>receiver</h3>
<!-- NOTICE THAT THIS IS NEW NOW... -->
<!-- IT IS IMPORTANT THAT YOU HAVE THIS PARAGRAPH EXACTLY AS IT IS HERE -->
<p class='bubbled-data'></p>
</div>
<div id = 'contact'>
    <h1 align="left"> all contacts </h1>
    <div id="usersOnLine">
        <h2>
            <?php
            foreach ($result as $key => $val) {
                echo "<span class='clickAble'>" . $val['email'] . "</span>";
                echo "<br>";
                echo "<br>";
            }
            ?>
        </h2>
    </div>
</div>

</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);
                $("#reciver_email").val(nameValue);
            });

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

1 个答案:

答案 0 :(得分:0)

所以你想在页面重新加载后保留接收器div中的名字。

您可以使用html Local Storage,

Refer HTML Local Storage Objects

<script type="text/javascript">

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

            if(window.performance)
            {
               if(performance.navigation.type  == 1 )
               {
                  var nameValue = localStorage.getItem("nameValue");
                  receiver.find(".bubbled-data").text(nameValue);
                  $("#reciver_email").val(nameValue);
                  receiver.find(".bubbled-data").text(nameValue);
               }
            }

            // 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);
                $("#reciver_email").val(nameValue);

                localStorage.setItem("nameValue", nameValue);
            });

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

试试这个。