Question

所以当我点击名字（class ='frnd'）时，我的代码会执行，然后在结果中打开一个窗口并且它是可拖动的但是当我再次单击（class = frnd）然后再次打开新窗口时，例如，如果我点击西蒙那里弹出新的窗口，一次点击它是可拖动的，而不是再次点击名称（class ='frnd'（西蒙）），再次弹出一个窗口。问题：如果窗口已经打开，我不想要它，它不会再打开同一个窗口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

Answer 2

问题是context.scale(-scalefactorX,-scalefactorY)不使用类的句点前缀 - 即 selector 语法。所以：

hasClass()会找到你的.hwindow div，
var hwindow_div = $('.5647383'+id)检查是否有班级。

A simple example

PS。虽然这是一个单独的问题，@ marekful对于hwindow_div.hasClass('5647383'+id)语法是正确的。

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

2 个答案: