Question

我得到一个变量，表示所需的项目数和计算可投放区域内的已删除项目。您可以查看示例here。所以我想要的是将变量传递给javascript，然后计算差异。

我将变量放入div：

<div id="numbr" >10</div>

这是js代码，它计算掉落的项目并显示总数：

var n = $(this).closest("div.proc").find(".dropClass").length -1;
$(this).closest("div.proc").find("div.dropped").text("Items Dropped: " + n + ".");

我的目标是找出<div class="numbr">和n之间的差异，然后显示它。我怎样才能在js中实现这一目标？这只是一个例子。
在我的系统中，数字是从用户输入接收的php变量。可能有两个以上的盒子：它取决于用户的输入。

Answer 1

在drop事件和click事件中尝试以下操作：

a <- sample.int(350)
b <- sample.int(150)

microbenchmark::microbenchmark(std_setdiff(a, b), arma_setdiff(a, b))

> Unit: microseconds
>                expr    min      lq     mean median     uq     max neval cld
>   std_setdiff(a, b) 11.548 14.7545 17.29930 17.107 19.245  36.779   100  a 
>  arma_setdiff(a, b) 60.727 65.0040 71.77804 66.714 72.702 138.133   100   b

演示：https://jsfiddle.net/d1ddsj8m/2/

var proc = $(this).closest("div.proc");
    proc.find('.dif').text('Difference ' +(proc.find('.numbr').text() - n));

   var itm = [];
   $("#savebutton").click(function() {
     LISTOBJ.saveList();
   });
   $("#myAccordion").accordion({
     heightStyle: "content",
     active: false,
     collapsible: true
   });
   $("#myAccordion li").draggable({
     appendTo: "body",
     helper: "clone",
     start: function(ev, ui) {
       ui.helper.width($(this).width());
     }
   });

   $(".projLeader ol").droppable({
     tolerance: 'pointer',
     hoverClass: 'highlight',
     drop: function(ev, ui) {
       var zz = ui.draggable.text()
       var xyz = itm.includes(zz);
       if (xyz === false) {
         var item = ui.draggable;
         if (!ui.draggable.closest('.placeholder').length) item = item.clone().draggable(); // if item was dragged from the source list - clone it
         //this.innerHTML = '';                                                        						// clean the placeholder
         item.addClass('dropClass').appendTo(this);
         // append item to placeholder   
         //add to array
         itm.push(zz);
         var n = $(this).closest("div.proc").find(".dropClass").length;
         $(this).closest("div.proc").find(".dropped").text("Items Dropped: " + n + ".");
         $(this).closest("div.proc").find('.dif').text('Difference ' + ($(this).closest("div.proc").find('.numbr').text() - n));


       } else {
         alert('Name is Already Exist');
       }

     }
   });
   $(".projLeader").on('click', '.closer', function() {
     var item = $(this).closest('.item');
     var element = $("#myAccordion ul li").filter(function() {
       return $(this).text() == item.text();
     });
     itm.splice(item);
     var n = $(this).closest("div.proc").find(".dropClass").length - 1;
     $(this).closest("div.proc").find("div.dropped").text("Items Dropped: " + n + ".");
     $(this).closest("div.proc").find('.dif').text('Difference ' + ($(this).closest("div.proc").find('.numbr').text() - n));
     item.fadeTo(200, 0, function() {
       item.remove();
     })
   });

   var LISTOBJ = {
     saveList: function() {
       var listCSV = "";
       $(".projLeader li").each(function() {
         if (listCSV === "") {
           listCSV = $(this).text();
         } else {
           listCSV += ", " + $(this).text();
         }
         $("#output").text(listCSV);
         $(".hiddenListInput").val(listCSV);
       });
     }
   }

body {
  font-family: verdana;
  font-size: 12px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}
ol {
  list-style-type: none;
}
.item {
  height: 20px;
  width: 180px;
  margin: 5px;
  padding: 5px;
  border: 1px solid gray;
  background-color: #cd8;
  position: relative;
}
.item .closer {
  position: absolute;
  right: 5px;
  top: 2px;
  font: bold 14px arial;
  color: #666;
  padding: 1px 3px;
  line-height: 1;
  cursor: pointer;
  display: none;
}
.item .closer:hover {
  color: #000;
}
.placeholder {
  height: 30px;
  width: 195px;
  margin: 5px;
  background: #eee;
  border: 1px dashed #999;
}
.placeholder .item {
  margin: 0;
}
ol .item .closer {
  display: block;
}
.highlight {
  border: 1px solid red;
  background: #fff;
}
.highlight .item {
  opacity: 0.3;
}
.ui-draggable-dragging {
  z-index: 99;
  opacity: 1 !important;
}
.dropClass {
  background-color: lightblue;
  padding-left: 10px;
  width: 180px;
  border: 1px solid black;
  border-radius: 8px;
  margin-bottom: 5px;
}
.dropped {
  display: inline;
}
.dif {
  display: inline;
}
.numbr {
  display: inline;
}

Answer 2

看起来你正在使用jQuery，这使得动态操作DOM变得非常容易。

这是我要做的。首先，添加一个差异div，它将保持n和numbr的差异：

<div id="numbr">10</div>
<div id="difference"></div>

在你的JS中，计算差异并将其添加到div：

var n = $(this).closest("div.proc").find(".dropClass").length - 1;
var difference = parseInt($('#numbr').text(), 10) - n;
if (difference >= 0) {
    $('#difference').text('Difference ' + difference);
}

Answer 3

你的意思是你可以在javascript中使用PHP变量。如果是这样的话，这可能就是你要找的东西：

<?php

$myVariable = 200;

?>
<script type="text/javascript">
$(document).ready(function () {
    var myvar = <?= $myVariable; ?>;
    $(document).on('change', '.numbr', function () {
        var number = parseInt($(this).text(), 10);
        var difference = myvar - number;
        $('.somediv').text($difference);
    });
});
</script>

<div class="numbr">20</div>

Answer 4

要获取public class Requirements { public string EventMessageUId { get; set; } public int ProjectId { get; set; } public string CreatedByUser { get; set; } public string CreatedByApp { get; set; } public string CreatedOn { get; set; } public List<Message> Message {get; set;} //add this }内容，请使用dropClass方法。 text()将为您提供给定选择器的节点数，这不是您想要的。

您可以使用length方法获取numbr和dropClass内容。

试试这个（添加一些html让代码片段起作用）：

text()

inner = $('#innerproc').closest("div.proc");
numbr = $('#numbr').text();
n = inner.find(".dropClass").text();
inner.find("div.dropped").text("Items Dropped: " + (n - numbr) + ".");

在JS中计算已经从php解析的变量

4 个答案: