个人中心
gpt4 book ai didi

javascript - jquery弹出窗口实例重复问题

转载 作者：行者123 更新时间：2023-12-02 22:50:07 24 4
gpt4 key购买 nike

有人可以看一下代码吗，这里是问题截图 enter image description here

当单击侧边栏用户时，单击弹出标题后会出现一个弹出窗口，它将向下显示，然后如果有人从侧边栏单击同一用户，则会创建一个重复实例，单击头部将使第一个出现，第二个出现一个下来。

当有人再次单击侧边栏用户时，我想停止重复，然后已经生成的弹出窗口将切换。 https://jsfiddle.net/hamzasgd/Lqyajokp/4/ 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook like chat popup layout</title>
</head>

<body>


    <div id="chat-sidebar">

        <div id="sidebar-user-box" class="100">
            <img src="user.png" />
            <span id="slider-username">User 1</span>
        </div>
         <div id="sidebar-user-box" class="200">
            <img src="user.png" />
            <span id="slider-username">User 2</span>
        </div>
    </div>

</body>

</html>

$(document).ready(function(){

     var arr = []; // List of users 

    $(document).on('click', '.msg_head', function() {   
        var chatbox = $(this).parents().attr("rel") ;
        $('[rel="'+chatbox+'"] .msg_wrap').slideToggle('slow');
        return false;
    });


    $(document).on('click', '.close', function() {  
        var chatbox = $(this).parents().parents().attr("rel") ;
        $('[rel="'+chatbox+'"]').hide();
        arr.splice($.inArray(chatbox, arr), 1);
        displayChatBox();
        return false;
    });

    $(document).on('click', '#sidebar-user-box', function() {

     var userID = $(this).attr("class");
     var username = $(this).children().text() ;

     if ($.inArray(userID, arr) != -1)
     {
      arr.splice($.inArray(userID, arr), 1);
     }

     arr.unshift(userID);
     chatPopup =  '<div class="msg_box" style="right:270px" rel="'+ userID+'">'+
                    '<div class="msg_head">'+username +
                    '<div class="close">x</div> </div>'+
                    '<div class="msg_wrap"> <div class="msg_body">  <div class="msg_push"></div> </div>'+
                    '<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>     </div>  </div>' ;                   

     $("body").append(  chatPopup  );
     displayChatBox();
    });


    $(document).on('keypress', 'textarea' , function(e) {       
        if (e.keyCode == 13 ) {         
            var msg = $(this).val();        
            $(this).val('');
            if(msg.trim().length != 0){             
            var chatbox = $(this).parents().parents().parents().attr("rel") ;
            $('<div class="msg-right">'+msg+'</div>').insertBefore('[rel="'+chatbox+'"] .msg_push');
            $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
            }
        }
    });



    function displayChatBox(){ 
        i = 270 ; // start position
        j = 260;  //next position

        $.each( arr, function( index, value ) {  
           if(index < 4){
             $('[rel="'+value+'"]').css("right",i);
             $('[rel="'+value+'"]').show();
             i = i+j;            
           }
           else{
             $('[rel="'+value+'"]').hide();
           }
        });     
    }




});

最佳答案

我添加了一项检查，用于检查您是否已拥有具有该用户 ID 的聊天框:

var exist = $('.msg_box[rel="' + userID + '"]').length;

if (exist == 0) {


  arr.unshift(userID);
  chatPopup = '<div class="msg_box" style="right:270px" rel="' + userID + '">' +
    '<div class="msg_head">' + username +
    '<div class="close">x</div> </div>' +
    '<div class="msg_wrap"> <div class="msg_body">  <div class="msg_push"></div> </div>' +
    '<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>     </div>  </div>';

  $("body").append(chatPopup);
  displayChatBox();
}

请注意，您有一些无效的 html。不允许您在多个元素上拥有 id。

演示

$(document).ready(function() {

  var arr = []; // List of users	

  $(document).on('click', '.msg_head', function() {
    var chatbox = $(this).parents().attr("rel");
    $('[rel="' + chatbox + '"] .msg_wrap').slideToggle('slow');
    return false;
  });


  $(document).on('click', '.close', function() {
    var chatbox = $(this).parents().parents().attr("rel");
    $('[rel="' + chatbox + '"]').hide();
    arr.splice($.inArray(chatbox, arr), 1);
    displayChatBox();
    return false;
  });

  $(document).on('click', '#sidebar-user-box', function() {

    var userID = $(this).attr("class");
    var username = $(this).children().text();

    if ($.inArray(userID, arr) != -1) {
      arr.splice($.inArray(userID, arr), 1);
    }

    var exist = $('.msg_box[rel="' + userID + '"]').length;

    if (exist == 0) {


      arr.unshift(userID);
      chatPopup = '<div class="msg_box" style="right:270px" rel="' + userID + '">' +
        '<div class="msg_head">' + username +
        '<div class="close">x</div> </div>' +
        '<div class="msg_wrap"> <div class="msg_body">	<div class="msg_push"></div> </div>' +
        '<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div> 	</div> 	</div>';

      $("body").append(chatPopup);
      displayChatBox();
    } else {
      $('.msg_box[rel="' + userID + '"] .msg_wrap').slideToggle('slow');
    }
  });


  $(document).on('keypress', 'textarea', function(e) {
    if (e.keyCode == 13) {
      var msg = $(this).val();
      $(this).val('');
      if (msg.trim().length != 0) {
        var chatbox = $(this).parents().parents().parents().attr("rel");
        $('<div class="msg-right">' + msg + '</div>').insertBefore('[rel="' + chatbox + '"] .msg_push');
        $('.msg_body').scrollTop($('.msg_body')[0].scrollHeight);
      }
    }
  });



  function displayChatBox() {
    i = 270; // start position
    j = 260; //next position

    $.each(arr, function(index, value) {
      if (index < 4) {
        $('[rel="' + value + '"]').css("right", i);
        $('[rel="' + value + '"]').show();
        i = i + j;
      } else {
        $('[rel="' + value + '"]').hide();
      }
    });
  }




});
/**** Chat Popup Layout******/

body {
  background: #e5e5e5;
  font-family: sans-serif;
}

.msg_box {
  position: fixed;
  bottom: -5px;
  width: 250px;
  background: white;
  border-radius: 5px 5px 0px 0px;
}

.msg_head {
  background: black;
  color: white;
  padding: 8px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 5px 5px 0px 0px;
}

.msg_body {
  background: white;
  height: 200px;
  font-size: 12px;
  padding: 15px;
  overflow: auto;
  overflow-x: hidden;
}

.msg_input {
  width: 100%;
  height: 55px;
  border: 1px solid white;
  border-top: 1px solid #DDDDDD;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.close {
  float: right;
  cursor: pointer;
}

.minimize {
  float: right;
  cursor: pointer;
  padding-right: 5px;
}

.msg-left {
  position: relative;
  background: #e2e2e2;
  padding: 5px;
  min-height: 10px;
  margin-bottom: 5px;
  margin-right: 10px;
  border-radius: 5px;
  word-break: break-all;
}

.msg-right {
  background: #d4e7fa;
  padding: 5px;
  min-height: 15px;
  margin-bottom: 5px;
  position: relative;
  margin-left: 10px;
  border-radius: 5px;
  word-break: break-all;
}


/**** Slider Layout Popup *********/

#chat-sidebar {
  width: 250px;
  position: fixed;
  height: 100%;
  right: 0px;
  top: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid #b2b2b2;
}

#sidebar-user-box {
  padding: 4px;
  margin-bottom: 4px;
  font-size: 15px;
  font-family: Calibri;
  font-weight: bold;
  cursor: pointer;
}

#sidebar-user-box:hover {
  background-color: #999999;
}

#sidebar-user-box:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  float: left;
}

#slider-username {
  float: left;
  line-height: 30px;
  margin-left: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat-sidebar">

  <div id="sidebar-user-box" class="100">
    <img src="user.png" />
    <span id="slider-username">User 1</span>
  </div>
  <div id="sidebar-user-box" class="200">
    <img src="user.png" />
    <span id="slider-username">User 2</span>
  </div>
</div>

关于javascript - jquery弹出窗口实例重复问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58212950/

24 4 0
文章推荐： javascript - 我按移动键的次数越多，动画的速度就越快。我怎样才能减慢或逐渐增加它？
文章推荐： ElasticSearch Scroll 只返回 10 条记录
文章推荐： Elasticsearch 查询以获取每 x 分钟/小时/天的中值/平均值
文章推荐： javascript - Laravel 5 : show comments using Vue.js
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com