1

配列 (id、値) に要素を追加し、それらからチェック ボックスを作成する JavaScript スクリプトがあります。その背後にあるアイデアは、ユーザーがスポーツを選択できるようにすることであり、チェックボックスとして表示され、チェックを外すと画面から消えます. そのため、ページが読み込まれると、いくつかのスポーツが既に選択されています。つまり、ユーザーはそれらを再度追加することはできませんが、いずれかを削除して再度追加することはできます。私の問題は、データベースを削除したときにデータベースから最初に追加されたものを再度追加できないことです。スクリプトに警告メッセージを入力しましたが、実際には削除されたのに、削除されていないことがスクリプトから通知されます。私は何を間違っていますか？

 <script type='text/javascript'>
    //<![CDATA[
     $(window).load(function () {

         var db = [{ id: 6, value: "Running"},{ id: 1, value: "Baseball" }];
         var allVals = [];

         $.each(db, function (k, v) {
             $("#results").append("<label class=\"wList\"><input checked=\"checked\" class=\"wList-chk\" name=\"wList[]\" type=\"checkbox\" value=\""
             + v.id
             + "\">"
             + v.value
             + "</label>");
             allVals.push(v.id);
         });

         $(function () {
             var sports = [{ id: 1, value: "Baseball" },
                        { id: 2, value: "Soccer" },
                        { id: 3, value: "Basketball" },
                        { id: 4, value: "Volleyball" },
                        { id: 5, value: "Tennis" },
                        { id: 6, value: "Running" },
                        { id: 7, value: "Swimming"}];

             $("#sports").autocomplete({
                 source: sports,
                 select: function (event, ui) {

                     if ($.inArray(ui.item.id, allVals) == -1) {
                         allVals.push(ui.item.id);
                         $("#results")
                                     .append("<label class=\"wList\"><input checked=\"checked\" class=\"wList-chk\" name=\"wList[]\" type=\"checkbox\" value=\""
                                     + ui.item.id
                                     + "\">"
                                     + ui.item.value
                                     + "</label>");
                         $('input.wList-chk[type="checkbox"][value="' + ui.item.id + '"]').parent().effect('highlight', {}, 1500);
                         ui.item.value = "";
                     }
                     else {
                         //ALERT TO SEE IF ELEMENT IS STILL IN ARRAY
                         alert("item already in ... but should not be in");
                         ui.item.value = "";
                         $('input.wList-chk[type="checkbox"][value="' + ui.item.id + '"]').parent().effect('highlight', {}, 1500);
                     }
                 }
             });
         });

         $(document).on("change", ".wList-chk", function () {
             if ($(this).attr('checked')) {
                 return;
             } else {
                 var thisVal = $(this).val();
                 var index = $.inArray(thisVal, allVals);
                 allVals.splice(index, 1);
                 $(this).parent('.wList').remove();
             }
         });
     });//]]>  

</script>

完全な jsfiddle は次のとおりです: http://jsfiddle.net/hdfse/

4

1 に答える 1

2 
var thisVal = $(this).val();

に変更する必要があります

var thisVal = parseInt($(this).val());

$(this).val()を返すのでstring、var index = $.inArray(thisVal, allVals);これindexは を取得し-1、allVals.splice(index, 1);予期しないアイテムを削除します。

これがjsfiddle http://jsfiddle.net/hdfse/8/です

于 2013-01-17T17:20:24.017 に答える