Question

为什么我的“多个系统”只有一个.system出现，

正如我在Codepen中看到的那样，当我将1 class="systeme"拖放到#dz中时，会出现“多个系统”，但它不应该出现，因为它不是

$("#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

我想您希望“多个系统”出现不止一次，如果是，请更改

$("#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语句返回大于1的值？

2 个答案: