ループ内のドロップ可能領域内のアイテムの数をカウントする

私は、ドロップ可能領域のアコーディオンとループを持っています。私は両方のドロップ可能フィールドの項目を数えることができますが、カウントに問題があります。私はそれを両方の行を別々にカウントする必要があります。私はここでfiddleを持っています、それは1行のためにうまく動作しますが、それをループにしようとすると問題が発生します。また、項目を削除した後、項目を減らすにはどうしたらいいですか？ここでループ内のドロップ可能領域内のアイテムの数をカウントする

は、ループとコードです：

<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' OR'各ボックスseparate'？出力がどこにあるのかを教えてください。 – vijayP

@vijayP各行は別々ですが、両方のボックスを一緒に –

ああ...あなたはBox1 - Box2の組み合わせが繰り返されることを意味し、このペアはページ上に複数回表示されることがあります。そして、我々は、各ペアのために 'Items Dropped：（some numbers）.'テキストを表示したいと思います。 – vijayP

このコードを確認してください。主な考え方は、HTMLダイアログ内でユニークなidを持つことです。したがって、ループ内にDOMを作成する場合は、それらを割り当てようとしないでください。id;代わりにclassに行ってください。ここで私は2行を追加し、あまりにもHTML、JSとCSS内classにidを変更しました：

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

ありがとう、ループを扱うときにクラスを使用する方が良いですか？ –

@YevgeniyBagackiy - はい、絶対に。 'class'に行き、jQueryの' $ .closest'と '$ .find'を使って各ブロック/行内で作業してください。 – vijayP

ありがとうございました。削除されたアイテムの数を減らした後は、そのアイテムの数を減らしてください。どのように私はこれを行うことができますか？ –

ループ内のドロップ可能領域内のアイテムの数をカウントする

答えて

関連する問題