0

データを保存するためのリストビューを動的に作成しています。ボタンをクリックすると、リストビューにチェックボックスが追加されます。リストビュー内の項目の個々のチェックボックスを選択すると、その特定のリスト項目をリストビューから削除する必要があります。しかし、特定のアイテムを削除しようとすると、削除されません。

$('#add #input[name="check"]:checkbox').change(function () {
    var chkLength = $('input[name="check"]:checkbox').length;
    var chkdLength = $('input[name="check"]:checkbox:checked').length;
    if (chkLength == chkdLength) {
        $('#select').attr('checked', true);
        //$('#empty').on('click', function() {
        $('#add input[name="check"]:checkbox:checked').on('click', function () {
            $('#empty').on('click', function () {
                localStorage.removeItem($(this).attr('url'));
                $("#favoritesList").listview('refresh');
            });
        });
    } else {
        $('#select').attr('checked', false);
    }
});

更新しました：

私はリストビューとチェックボックスのすべてを動的に作成しています。

$('#edit').live('click', function () {
    fromGetStorage();
});

function fromGetStorage() {

    $("#favoritesList").empty();
    $(".ui-listview-filter").remove();
    $("#favoritesList").append('<input type="checkbox" name="all" id="select" />Select all</br>');
    for (var i = 0; i < localStorage.length; i++) {
        var url = localStorage.key(i);
        var demo = localStorage.getItem(url);
        $("#favoritesList").append('<li id="add"><div><input type="checkbox" name="check" id="check">&nbsp;<a href="' + url + '" style="text-decoration:none;color:black">' + demo + '</a></div></li>').attr('url', url);
        $("#favoritesList").listview('refresh');
    }

    $("#select").click(function (event) {
        event.stopPropagation();
    });
    $('#select').change(function () {
        if ($("#select").is(':checked')) {
            $("#add #check").prop("checked", true);
            $('#empty').on('click', function () {
                localStorage.clear();
                $("#favoritesList").listview('refresh');
            });
        } else {
            $("#add #check").prop("checked", false);
        }
    });
    $("#add #check").click(function (event) {
        event.stopPropagation();
    });
    $('#add #input[type="checkbox"]').change(function () {
        var chkLength = $('input[type="checkbox"]').length;
        var chkdLength = $('input[type="checkbox"]:checked').length;
        var item = $(this);
        var content = $(item).text();
        if (chkLength == chkdLength) {
            $('#select').attr('checked', true);
            if (item.is(':checked')) {
                $("#delete").click(function () {
                    $('#' + content).remove();
                    $("#favoritesList").listview('refresh');
                });
            }

        } else {
            $('#select').attr('checked', false);
        }
    });


}

前もって感謝します。

4

1 に答える 1

0

解決

関数内のこのコードのビット:

$("#delete").click(function () {
    $('#' + content).remove();
    $("#favoritesList").listview('refresh');
});

は必要ありません。（おもう）。あなたのコードは、何を達成しようとしているのか非常に不明確です。jsfiddle.netでフィドルを使用して達成しようとしていることを説明しない限り、これを解決するのは非常に難しい場合があります。しかし、初心者のために、これをしたいかもしれません:

 $('#add #input[type="checkbox"]').change(function () {
        var chkLength = $('input[type="checkbox"]').length;
        var chkdLength = $('input[type="checkbox"]:checked').length;
        var item = $(this);
        var content = $(item).text();
        if (chkLength === chkdLength) {
            $('#select').attr('checked', true);
            if (item.is(':checked')) {
                item.closest("li").remove(); //remove delete click initialisation
            }

        } else {
            $('#select').attr('checked', false);
        }
    });

コードをフォーマットするには、以下のいずれかの方法を使用してリストビューを作成します。あなたが私に尋ねると、問題はそこにあります。

簡単な方法 - コントロールグループを使用したチェックボックスリストの作成

まず第一に、listview を使用してチェックボックス リストを作成するのは明らかに間違っています。これには、リストビューの代わりにコントロール グループを使用する必要があります。その理由は、リストビューを収容するように適応させると、checkbox多くの CSS 作業が必要になるためです。コントロール グループは、より多くの機能を提供し、イベントを処理するときによりクリーンになります。

  1. デモ: http://jsfiddle.net/hungerpain/V8jda/8/
  2. よりスタイルアップしたデモ: http://jsfiddle.net/hungerpain/V8jda/

難しい方法 - listview を使用したチェックボックス リストの作成

リストビューの使用にまだ固執している場合は、次の例をご覧ください。containerに呼び出されるクラスを追加して、次のliようにスタイルを設定できます。

.container {
    padding : 0 !important;
    border-width : 0 !important;
}
.container label {
    margin : 0;
}

次に、<li/>must のコンテンツは次のようになります。

<li class="container">
   <input type="checkbox" name="checkbox-0a" id="checkbox-0a" data-theme="c">
   <label data-corners="false" for="checkbox-0a">Sweet Child 'O Mine </label> 
</li>

このテンプレートに からの配列を入力する必要がありますlocalStorage。pageinit次のような親ページのイベントでリストビューを作成してみてください:

$(document).on("pageinit", "#mypage", function () {
    var $page = $(this);
    //assuming this comes from localStorage
    var songs = ["Sweet Child 'O Mine", "Summer of '69", "Smoke in the Water", "Enter Sandman", "I thought I've seen everything"];

    //array of li - empty
    var li = [];

    $.each(songs, function (i, song) {
        //the variable you'll be using for input - label relationship
        var idForName = "checkbox-" + i + "a";
        //create cbox HTML
        var cbox = '<li class="container"><input type="checkbox" name="' + idForName + '" id="' + idForName + '" data-theme="c"/><label data-corners="false" for="' + idForName + '" >' + songs[i] + ' </label> </fieldset></li>';
        //add it to li[] array
        li.push(cbox);
    });
    //cache ul for later use
    var $ul = $("#songlist");
    //append the li to ul
    $ul.html(li)
    //refresh listview
    $ul.listview("refresh");
    //refresh the checkbox etc
    $ul.trigger("create");
});

change イベントは次のようになります (これは pageinit イベントにもある必要があります)。

//change event on input:checked (will fire only when check box is checked)
$ul.on("change", "input[type=checkbox]:checked", function () {
   //call our slideRight function on .container class
   $(this).closest("li").remove();
   //refresh 
   $ul.listview("refresh").trigger("create");
});
  1. デモ: http://jsfiddle.net/hungerpain/SYA3y/6/
  2. よりスタイルアップしたデモ: http://jsfiddle.net/hungerpain/SYA3y/
于 2013-07-27T07:14:11.407 に答える