次の買い物リストがあります
ユーザーがごみ箱をクリックするたびに、製品をリストから削除したいと考えています。だから私はこれを持っています:
$(document).ready(function() {
var selectedproducts = new Array(); //List of selected products
$("#add_product_button").button();
$("#add_product_button").click(function() {
//Add some products to selectedproducts
//Omitted for clarity
selectedproducts[i]=document.getElementById("autocomplete_text_field").value;
thesi=jQuery.inArray(document.getElementById("autocomplete_text_field").value,selectedproducts);
var row=$('<div class"productsclass" style="height:50px; background-color:#E36D84; -webkit-border-radius: 5px; border-radius: 5px; border-style:solid; border-color:#DB4865; id='+rowID+'" ><label style="position:relative; top:10px; left:2px; font-size:20px">'+selectedproducts[i]+'</label><input style="position:relative; left:2px; top:10px; width:20px;" type="text" name="Quantity" value="1"><img class="delete" id="'+rowID+'" src="http://b.dryicons.com/images/icon_sets/handy_part_2_icons/png/128x128/recycle_bin.png" height="22" width="22" style="position:relative; top:10px; float: right;"></div><br>');
rowID++;
$("#productstable").append(row);
i++;
console.log("Thesi: "+thesi+" Timi:"+document.getElementById(thesi).value);
});
//Delete products
$(document).on("click", "[class*='delete']", function(s) {
thisID = $(this).attr('id'); //find items parent
console.log("ThisID: "+thisID);
console.log(jQuery.inArray(thisID,selectedproducts));//find item's position in the selectedproducts
selectedproducts.splice(thisID,1);
$(this).parent().hide("explode", 1000);
$(this).parent().remove();//delete item
console.log("Size:"+selectedproducts.length);
console.log(selectedproducts);
});
});
問題は、jQuery.inArray
常に -1 を返すことです。UI からは正しい製品が削除されますが、selectedproducts 配列からは削除されます。
HTML:
<div id="maindiv" class="maindiv">
<input id="autocomplete_text_field">
<button id="add_product_button">Add product</button>
</div>
<div id="supplier">
<form name="frm1" action="http://localhost/tddd27/index.php/auth/session">
<input type="image" src="<?php echo base_url()?>assets/images/fb_supplier.png" />
</form>
</div>
<div id="ProductsDiv" class="ProductsDiv" hidden="true">
<div id="tabs">
<ul>
<li><a href="#fragment-1"><span>Shopping List</span></a></li>
</ul>
<div id="fragment-1">
<form action="#" id="productstable" name="productstable">
<p></p>
</form>
</div>
</div>
</div>
何が問題なのですか?