在循環中的可投放區域中計數項目

我有可延伸區域的手風琴和循環。我設法爲這兩個droppable字段計數項目，但是我遇到了計數問題，我需要它將每行分開計數，而不是將兩行計算在一起。我有一個fiddle在這裏，它的工作罰款一行，但當我試圖使其循環問題出現。而且我怎樣才能減少項目被刪除後的項目？在循環中的可投放區域中計數項目

這裏是代碼迴路：

<body style="background-color:white;" onload="startTime()"> 
<h1 class="ui-widget-header">Products</h1>  
<div id="myAccordion"> 
<h3><a href="#">T-Shirts</a></h3> 
    <div> 
     <ul> 
      <li>Lolcat Shirt</li> 
      <li>Cheezeburger Shirt</li> 
      <li>Buckit Shirt</li> 
     </ul> 
    </div> 
<h3><a href="#">Bags</a></h3> 
    <div> 
     <ul> 
      <li>Zebra Striped</li> 
      <li>Black Leather</li> 
      <li>Alligator Leather</li> 
     </ul> 
    </div> 
<h3><a href="#">Gadgets</a></h3> 
    <div> 
     <ul> 
      <li>iPhone</li> 
      <li>iPod</li> 
      <li>iPad</li> 
     </ul> 
    </div> 
</div> 
<label> 
<?php 
    $len=2; 
    for($y=0;$y<$len;$y++) 
    { 
     echo "<div class='proc'> <pre>"; 
     echo "<span> </span><br /></pre>"; 
?> 
    <div id="procLeader"> 
     <label>Box1:</label> 
     <div class="ui-widget-content"> 
     <div id="procleader"> 
      <ol> 
       <li class="placeholder" name="procleader">Add here</li> 
       <input type="hidden" name="procleader" id="hiddenListInput3" /> 
      </ol> 
     </div> 
     </div> 
    </div> 
    <div id="procChecker"> 
     <label>Box2:</label> 
     <div class="ui-widget-content"> 
     <div id="procchecker"> 
      <ol> 
       <li class="placeholder" name="procchecker">Add here</li> 
       <input type="hidden" name="procchecker" id="hiddenListInput4" /> 
      </ol> 
     </div> 
     </div> 
    </div> 
<?php  
    echo "</div>";      
    } 
?> 
</label> 
</body>

來源

2016-09-23 Yevgeniy Bagackiy

'的每一行separate'或'每箱separate'？你能解釋一下輸出中的哪一行嗎？ – vijayP

@vijayP每行分開，但對於兩個盒子在一起 –

哦，好吧..你的意思是說Box1 - Box2組合將重複，我們可能會在頁面上多次有這對。我們想要顯示每個配對的'Items Dropped：（某個數字）.'文本。請確認 – vijayP

請檢查該代碼。主要思想是在HTML對話框中有獨特的id。所以如果我們在循環中創建DOM，那麼不要試圖將它們分配給它們id;取而代之的是class。在這裏，我增加了2行HTML，JS和CSS太內改變id到class：

https://jsfiddle.net/n5df9upr/16/

$(function() { 
      var itm = []; 
      $("#savebutton").click(function() { 
      LISTOBJ.saveList(); 
      }); 
      $("#myAccordion").accordion({ 
      heightStyle: "content", 
      active: false, 
      collapsible: true 
      }); 
      $("#myAccordion li").draggable({ 
      appendTo: "body", 
      helper: "clone" 
      }); 
      $(".leader ol").droppable({ 
      activeClass: "ui-state-default", 
      hoverClass: "ui-state-hover", 
      accept: ":not(.ui-sortable-helper)", 
      drop: function(event, ui) { 
       var zz = ui.draggable.text() 
       var xyz = itm.includes(zz); 
       if (xyz === false) { 
       $(this).find(".placeholder").remove(); 
       $("<li></li>").text(ui.draggable.text()) 
        //.addClass("cart-item") 
        .addClass('dropClass') 
        .appendTo(this); 

       //add to array 
       itm.push(zz); 
       //add style 
       $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred'); 
       var n = $(this).closest("div.proc").find(".dropClass").length; //finding the items within own container 
       $(this).closest("div.proc").find("span").text("Items Dropped: " + n + "."); //setting the text in own container 

       } else { 
       alert('Name is Already Exist'); 
       } 

      } 
      }).sortable({ 
      items: "li:not(.placeholder)", 
      sort: function() { 
       $(this).removeClass("ui-state-default"); 
      } 
      }); 
      $(".checker ol").droppable({ 
      activeClass: "ui-state-default", 
      hoverClass: "ui-state-hover", 
      accept: ":not(.ui-sortable-helper)", 
      drop: function(event, ui) { 
       var zz = ui.draggable.text() 
       var xyz = itm.includes(zz); 
       if (xyz === false) { 
       $(this).find(".placeholder").remove(); 
       $("<li></li>").text(ui.draggable.text()) 
        //.addClass("cart-item") 
        .addClass('dropClass') 
        .appendTo(this); 

       //add to array 
       itm.push(zz); 
       //add style 
       $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").addClass('bred'); 
       var n = $(this).closest("div.proc").find(".dropClass").length; 
       $(this).closest("div.proc").find("span").text("Items Dropped: " + n + "."); 

       } else { 
       alert('Name is Already Exist'); 
       } 

      } 
      }).sortable({ 
      items: "li:not(.placeholder)", 
      sort: function() { 
       $(this).removeClass("ui-state-default"); 
      } 
      }); 
      $("#myAccordion ul").droppable({ 
      drop: function(event, ui) { 
       $(ui.draggable).remove(); 
       var zz = ui.draggable.text() 
       $('.ui-droppable').find("li.ui-draggable:contains('" + zz + "')").removeClass('bred'); 

       var indexItm = itm.indexOf(zz); 
       if (indexItm > -1) { 
       itm.splice(indexItm, 1); 
       } 
      }, 
      hoverClass: "ui-state-hover" 
       //accept: '.cart-item' 
      }); 
     });

來源

2016-09-23 08:24:54 vijayP

非常感謝，處理循環時使用class更好嗎？ –

@YevgeniyBagackiy - 絕對是。去'class'並使用jQuery的'$ .closest'和'$ .find'在你的每個塊/行中工作。 – vijayP

非常感謝您的幫助。刪除後刪除項目的數量會減少多少。我怎麼能做到這一點？ –

在循環中的可投放區域中計數項目

回答

相關問題