2015-03-24 50 views
0

我一直在为这个项目进行学校工作。这是K-J等级的供应清单。每个年级都有#2铅笔和各种其他类似的项目。当您在幼儿园(#2铅笔)中选择一个项目并在第五年级选择相同的项目时,则生成列表我不需要#2铅笔显示两次,但只显示一次,旁边有数量编号。如何删除重复的选定项目并用数量替换

我相信它与if语句有关,但我仍然试图掌握这些。

这里是jQuery Mobile的部分

<body> 
<section class="header_default footer_default" data-role="page" id="setup" data-title="Setup"> 
<article data-role="content"> 
    <div class="loaded"></div> 
    <p id="count"></p> 
    <form> 
<fieldset data-role="controlgroup" id="hoursName"> 
      <legend><strong>Kindergarten Supply List:</strong></legend> 
      <input type="checkbox" class="checkbox-group" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" > 
      <label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label> 
      <input type="checkbox" class="checkbox-group" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils"> 
      <label for="2">(2 Quanity) Red Pencils</label> 
      <input type="checkbox" class="checkbox-group" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers"> 
      <label for="3">(1 Quanity) Pack of pink erasers</label> 
      <input type="checkbox" class="checkbox-group" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)"> 
      <label for="4">(1 Quanity) Box of Kleenex (tissue)</label> 
      <input type="checkbox" class="checkbox-group" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers"> 
      <label for="5">(1 Quanity) Pack of pencil cap erasers</label> 
     </fieldset> 
     <fieldset data-role="controlgroup" id="hoursName"> 
      <legend><strong>First Grade Supply List:</strong></legend> 
      <input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" > 
      <label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label> 
      <input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils"> 
      <label for="2">(2 Quanity) Red Pencils</label> 
      <input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers"> 
      <label for="3">(1 Quanity) Pack of pink erasers</label> 
      <input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)"> 
      <label for="4">(1 Quanity) Box of Kleenex (tissue)</label> 
      <input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers"> 
      <label for="5">(1 Quanity) Pack of pencil cap erasers</label> 
     </fieldset> 
     <fieldset data-role="controlgroup" id="hoursName"> 
      <legend><strong>Second Grade Supply List:</strong></legend> 
      <input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" > 
      <label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label> 
      <input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils"> 
      <label for="2">(2 Quanity) Red Pencils</label> 
      <input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers"> 
      <label for="3">(1 Quanity) Pack of pink erasers</label> 
      <input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)"> 
      <label for="4">(1 Quanity) Box of Kleenex (tissue)</label> 
      <input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers"> 
      <label for="5">(1 Quanity) Pack of pencil cap erasers</label> 
     </fieldset> 
     <fieldset data-role="controlgroup" id="hoursName"> 
      <legend><strong>Third Grade Supply List:</strong></legend> 
      <input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" > 
      <label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label> 
      <input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils"> 
      <label for="2">(2 Quanity) Red Pencils</label> 
      <input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers"> 
      <label for="3">(1 Quanity) Pack of pink erasers</label> 
      <input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)"> 
      <label for="4">(1 Quanity) Box of Kleenex (tissue)</label> 
      <input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers"> 
      <label for="5">(1 Quanity) Pack of pencil cap erasers</label> 
     </fieldset> 
     <fieldset data-role="controlgroup" id="hoursName"> 
      <legend><strong>Forth Grade Supply List:</strong></legend> 
      <input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" > 
      <label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label> 
      <input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils"> 
      <label for="2">(2 Quanity) Red Pencils</label> 
      <input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers"> 
      <label for="3">(1 Quanity) Pack of pink erasers</label> 
      <input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)"> 
      <label for="4">(1 Quanity) Box of Kleenex (tissue)</label> 
      <input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers"> 
      <label for="5">(1 Quanity) Pack of pencil cap erasers</label> 
     </fieldset> 
     <fieldset data-role="controlgroup" id="hoursName"> 
      <legend><strong>Fifth Grade Supply List:</strong></legend> 
      <input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" > 
      <label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label> 
      <input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils"> 
      <label for="2">(2 Quanity) Red Pencils</label> 
      <input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers"> 
      <label for="3">(1 Quanity) Pack of pink erasers</label> 
      <input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)"> 
      <label for="4">(1 Quanity) Box of Kleenex (tissue)</label> 
      <input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers"> 
      <label for="5">(1 Quanity) Pack of pencil cap erasers</label> 
     </fieldset> 
     <fieldset data-role="controlgroup" id="hoursName"> 
      <legend><strong>Sixth Grade Supply List:</strong></legend> 
      <input type="checkbox" name="checkboxsupply" id="1" value="(48 Quanity) #2 6-sided pencils (sharpened preferred)" > 
      <label for="1">(48 Quanity) #2 6-sided pencils (sharpened preferred)</label> 
      <input type="checkbox" name="checkboxsupply" id="2" value="(2 Quanity) Red pencils"> 
      <label for="2">(2 Quanity) Red Pencils</label> 
      <input type="checkbox" name="checkboxsupply" id="3" value="(1 Quanity) Pack of pink erasers"> 
      <label for="3">(1 Quanity) Pack of pink erasers</label> 
      <input type="checkbox" name="checkboxsupply" id="4" value="(1 Quanity) Box of Kleenex (tissue)"> 
      <label for="4">(1 Quanity) Box of Kleenex (tissue)</label> 
      <input type="checkbox" name="checkboxsupply" id="5" value="(1 Quanity) Pack of pencil cap erasers"> 
      <label for="5">(1 Quanity) Pack of pencil cap erasers</label> 
     </fieldset> 
    </form> 
    <button class="ui-btn ui-corner-all Create">Create List</button> 


</article><!--content--> 
</section> 

这里是我有

<div data-role="page" id="nameList"></div> 
<script id="jsbin-javascript"> 
$(".Create").on("click", function() { 
    var selectedValues = ""; 
    $checkedCheckboxes = $("input:checkbox[name=checkboxsupply]:checked"); 
    $checkedCheckboxes.each(function() { 
     $('#nameList').append('<li>' + $(this).val() + '</li>'); 
    }); 
    window.location = "#nameList"; 
}); 
</script> 

的JavaScript任何建议将是巨大的,我已经使用jQuery的方式来计数的数量尝试但没有运气。

再次感谢。

回答

0

假如你不能改变任何标记,这里你可以这样做:)有点哈克的方式

$(".Create").on("click", function() { 
    var valuesToListItemMap = {}; 
    $('#nameList').text(""); 

    $checkedCheckboxes = $("input:checkbox[name=checkboxsupply]:checked"); 
    $checkedCheckboxes.each(function() { 
     var value = $(this).val(); 
     var element; 

     if (valuesToListItemMap[value]) { 
     element = valuesToListItemMap[value]; 

     var newCount = parseInt(element.data('count')) + 1; 

     element.data('count', newCount); 
     element.text(value + ' ' + newCount + ' were selected'); 
     } else { 
     element = $('<li>' + value + '</li>'); 
     element.data('count', 1); 

     $('#nameList').append(element); 

     valuesToListItemMap[value] = element; 
     } 
    }); 

    window.location = "#nameList"; 
    }); 

演示:http://jsbin.com/yanaju/4/edit

+0

酷如何改变量在(),但我希望保持这些数字相同,因为这样可以保持简单,寻找类似于某个项目的检查数量。 (48数量)#2 6支铅笔(首选锐化)3检查 – RealMcCoy 2015-03-24 21:58:47

+0

那么这是一个简单的调整,然后。 ;)我会更新我的描述... – brianvaughn 2015-03-24 21:59:33

+0

我明白,我接近获得数量,但我无法删除重复。再次感谢 – RealMcCoy 2015-03-24 22:02:23