当只选择一个元素时，为什么我的 if 语句 return 大于 1？

Question

为什么我的 "more than 1 system" 只出现一个 .system, :

当我将 1 class="systeme" 拖放到 #dz 中时，您可以在 codepen 中看到 "more than 1 system " 出现，但它不应该出现，因为它不是

$("#dz").find(".systeme").length >= 1

但是

$("#dz").find(".systeme").length > 1

$("#dz").droppable({
    accept: ".systeme",
    drop: function(e, ui) {
         $(ui.draggable).clone().appendTo($("#dz"));
         if ($("#dz").find(".systeme").length > 1) {
             $("#docs").html("<li>more than 1 system</li>");
         }
    }
});

codepen

感谢

Answer 1

因为这个条件：if ($("#dz").find(".systeme").length > 1)

如果你改变这部分，你可以追加你想玩的长度元素条件。

检查我的例子。请打开整页

$("#dz").droppable({
                accept: ".systeme",
                drop: function(e, ui) {

                    $(ui.draggable).clone().appendTo($("#dz"));
                    $(ui.draggable).clone().appendTo($("#docs"));

                }
            });

$(function() {

  $(".systeme").draggable({
    appendTo: '#dz',
    cursor: 'move',
    revertDuration: 400,
    revert: 'invalid',
    helper: 'clone'
  });

  $("#dz").droppable({
    accept: ".systeme",
    drop: function(e, ui) {
      $(ui.draggable).clone().appendTo($("#dz"));
      $(ui.draggable).clone().appendTo($("#docs"));
      if ($("#dz").find(".systeme").length > 3) {
        $("#docs").html("<li>more than 1 system</li>");
      }
    }
  });

});

.num {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

#add {
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}

.colonne {
  float: left;
  width: 45%;
  padding: 2%;
}

.colonnes:after {
  content: "";
  display: table;
  clear: both;
}

ul {
  padding: 10px;
  border-style: solid;
}

li {
  list-style-type: none;
  padding: 8px;
  margin: 8px;
  border-style: dotted;
  width: 300px
}

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="colonnes">
  <div class="colonne" id="colonne G">
    <h2>systèmes</h2>
    <ul>
      <li class="systeme visioimt">Terminal de Visio local</li>
      <li class="systeme pc">PC</li>
      <li class="systeme tel">Téléphone</li>
      <li class="systeme android">Android</li>
      <li class="systeme visioext">Terminal de Visio Exterieur</li>
      <li class="systeme skype">Skype</li>
    </ul>
  </div>

  <div class="colonne" id="colonne D">
    <h2>sites</h2>
    <ul id="dz">
      <li id="add">+</li>
    </ul>
  </div>

  <br>

</div>
<div>
  <h2>docs</h2>
  <ul id="docs">
  </ul>
</div>

Answer 2

我想你希望"more than 1 system"出现不止一次，如果是这样，改变

$("#docs").html("<li>more than 1 system</li>");

来自

var li=document.createElement("LI");
li.innerHTML="more than 1 system";
$("#docs").append(li);

我纠正了，你要找的是有条件的

改变

if ($("#dz").find(".systeme").length > 1)

来自

if ($("#dz").find(".systeme").length - 1 > 1)

其他

if ($("#dz").find(".systeme").length > 1) {
   $("#docs").html("<li>more than 1 system</li>");
}

来自

setTimeout(function(){
    if ($("#dz").find(".systeme").length > 1) {
        $("#docs").html("<li>more than 1 system</li>");
    }
},1000);

当只选择一个元素时，为什么我的 if 语句 return 大于 1？

Why does my if statement return greater than 1 when there's only one element selected?

javascript

jquery

jquery-ui