问计算已从php解析的JS中的变量
EN

Stack Overflow用户

提问于 2016-12-20 00:11:37

回答 3查看 67关注 0票数 2

我得到了一个变量，该变量表示所需的项目数以及可下垂区域内丢弃项目的计数。您可以查看示例这里。因此，我想要的是将一个变量传递给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变量。可能有两个以上的框:它取决于用户的输入。

javascript

php

jquery

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-12-20 00:27:36

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

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

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

   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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<h1 class="ui-widget-header">Products</h1>
<div id="myAccordion">
  <h3><a href="#">T-Shirts</a></h3>
  <div>
    <ul>
      <li class="item"><span class="closer">x</span>Lolcat Shirt</li>
      <li class="item"><span class="closer">x</span>Cheezeburger Shirt</li>
      <li class="item"><span class="closer">x</span>Buckit Shirt</li>
    </ul>
  </div>
  <h3><a href="#">Bags</a></h3>
  <div>
    <ul>
      <li class="item"><span class="closer">x</span>Zebra Striped</li>
      <li class="item"><span class="closer">x</span>Black Leather</li>
      <li class="item"><span class="closer">x</span>Alligator Leather</li>
    </ul>
  </div>
  <h3><a href="#">Gadgets</a></h3>
  <div>
    <ul>
      <li class="item"><span class="closer">x</span>iPhone</li>
      <li class="item"><span class="closer">x</span>iPod</li>
      <li class="item"><span class="closer">x</span>iPad</li>
    </ul>
  </div>
</div>

<div class='proc'><pre>
<br /></pre>
  <div class="projLeader">
    <label>Box1. Required number:
      <div class="numbr">10</div>.
      <div class="dropped"></div>
      <div class="dif">Difference:</div>
    </label>
    <div class="ui-widget-content">
      <ol>
        <li class="placeholder" name="projLeader"></li>
        <input type="hidden" name="projLeader" class="hiddenListInput1" />
      </ol>
    </div>
  </div>
</div>
<div class='proc'><pre>
<br /></pre>
  <div class="projLeader">
    <label>Box2. Required number:
      <div class="numbr">5</div>.
      <div class="dropped"></div>
      <div class="dif">Difference:</div>
    </label>
    <div class="ui-widget-content">
      <ol>
        <li class="placeholder" name="projLeader"></li>
        <input type="hidden" name="projLeader" class="hiddenListInput1" />
      </ol>
    </div>
  </div>
</div>
<br/>

<input type="submit" id="savebutton" class="button" value="Save" onclick="userSubmitted = true;" />
<div id="output"></div>

票数 2

Stack Overflow用户

发布于 2016-12-20 00:23:22

看起来您正在使用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);
}

票数 1

Stack Overflow用户

发布于 2016-12-20 00:29:33

您的意思是您可以在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>