javascript - 为什么 .hasClass 函数不起作用？

Question

所以当我点击名称(class ='frnd')时，我的代码会执行，然后结果打开一个窗口并且它是可拖动的但是当我再次点击(class =frnd)然后他们再次打开新窗口，例如，如果我单击 Simon，那里会弹出新窗口，单击后它是可拖动的，并且我不止一次单击 name(class ='frnd' (Simon)) 它再次弹出一个窗口。问题:我不希望如果窗口已经打开，它不会再打开同一个窗口 Simon。

为了避免这个问题，我在 js 中尝试了这段代码

if(!($("#windows").hasClass('.5647383'+id))){
                $html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
                $('#windows').append($html);
        }

我不知道为什么这个条件不工作 if($("#windows").hasClass('.5647383'+id))。

$(document).ready(function(){
    $('.frnd').click(function(){
        var id = $(this).attr("id");
        var usr=$(this).text();
        var exst = document.getElementsByClassName('.5647383'+id); 
        if($("#windows").hasClass('.5647383'+id)){
            $html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
            $('#windows').append($html);
    }
    });

    $('#windows').on('click','.cls', function(){
      $(this).parent().parent().hide();
    });

    $(function(){ 
        $('.frnd').click(function(){
      var id = $(this).attr("id");
      $('#windows').on('click','.'+id,function(){
        $(this).parent().draggable({
          handle: ".hwindow",
          containment:"body"
        });
      });
        });
    });
});

body {
  margin: 0;
  background-color: #999;
  height: 700px;
  }
.frnd {
  text-align: center;
  width: 50px;
  height: 20px;
  display: inline-block;
  background-color: #9B59B6;
  margin: 5px;
  border: 4px solid #3498DB;
  color: #F1C40F;
  cursor: pointer;
  float: right;
  }
.mwindow {
  position: fixed;
  width: 220px;
  height: 220px;
  border: 5px solid #16a085;
  background-color: #fff;
  display: block;
  margin: 5px;
  border-radius: 10px;
}
.mwindow:hover {
  z-index: 9999;
  }
.hwindow {
  width: 210px;
  height: 25px;
  background-color: #FF4500;
  padding: 5px;
  display: block;
  margin: 0px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.cls {
  display: inline-block;
  float: right;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  }
.msgbody {
  position: relative;
  height: 185px;
  background-color: #FF4500;
  //z-index:9999;
  }
.ctarea {
  position: absolute;
  width: 210px;
  resize: none;
  outline: none;
  top: 133px;
  font-size: 15px;
  padding: 5px;
  min-height: 40px;
  opacity: 0.9;
  border: none;
  border-top: 2px solid #ff0000;
  }
#mstd {
  position: absolute;
  width: 220px;
  height: 133px;
  background-color: #bb4500;
  opacity: 1;
  overflow-x: hidden;
  }

<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<li id="7" class="frnd">Maxi</li>
  <li id="8" class="frnd">John</li>
  <li id="9" class="frnd">Henry</li>
  <li id="10" class="frnd">Max</li>
  <li id="11" class="frnd">Simon</li>
<div id="windows"></div>

Answer 1

使用 hashmark 符号选择具有 ID 属性的元素，因此

'.' + id 应该是 '#' + id。

点符号 (.) 按类名选择元素。

http://codepen.io/anon/pen/qdaXgX

编辑

你还有很多其他问题，看看审查过的代码:

http://codepen.io/anon/pen/bdwaWx