1

でifステートメントを作成しようとすると問題が発生し$(this).attr("id")ます。チェックボックスをクリックしてチェックすると、そのIDがdivに記録されます#log（これは機能します）。クリックされてチェックされていない場合、jQueryはログに記録された行がチェックボックスのIDと同じであるかどうかをチェックする必要があります。その場合、そのスパンは削除されます。

これがjsfiddleです：http：//jsfiddle.net/fLskG/1/

したがって、クリックOption 1するとテキストoption-0が表示されます（これはチェックボックスのIDです）。ボタンをもう一度クリックすると、そのテキストが消えます。

スクリプトは次のとおりです。

$(document).ready(function() {
    $(".menu").find("input:checkbox").click(function() {

        if ($(this).is(":checked")) {
            $("#textValue").text($(this).val());
            $("#log").append("<span>" + this.id + "</span><br/>");
        }
        else {
            if ($("#log").children("span").contains($(this).attr("id"))) {
                console.log($(this).attr("id"));
                $("#log").children("span").remove();
            }
        }
    });
});​

問題は「含む」にあると確信しています。しかし、最初の関数でチェックされたチェックボックスのIDを含むスパンがあるかどうかをjQueryにチェックさせる方法がわかりません。

ありがとう。

4

3 に答える 3

1

$("#log").children("span").contains($(this).attr("id"))使用する代わりに$('#log span:contains("'+ this.id +'")')。

$（document）.ready（function（）{$（ "。menu"）。find（ "input：checkbox"）。click（function（）{

    if ($(this).is(":checked")) {
        $("#textValue").text($(this).val());
        $("#log").append("<span>" + this.id + "</span><br/>");
    }
    else {
        $('#log span:contains("'+ this.id +'")').next('br').andSelf().remove();
    }
});

}）;

デモ

于 2012-05-05T18:00:50.760 に答える
1

これを確認してください。チェックされていないチェックボックスのスパンだけを削除する必要があると思います

http://jsfiddle.net/fLskG/6/

 $(document).ready(function() {
    $(".menu").find("input:checkbox").click(function() {

        if ($(this).is(":checked")) {
            $("#textValue").text($(this).val());
            $("#log").append("<span>" + this.id + "</span><br/>");
        }
        else {
            if ($("#log").children("span:contains("+($(this).attr("id"))+")")) {
                console.log($(this).attr("id"));
                $("#log").children("span:contains("+($(this).attr("id"))+")").remove();
            }
        }
    });
});
于 2012-05-05T18:02:26.813 に答える
1

HTML5データ属性を採用することもできますが、これは1対1であるため、スパンにIDを指定するだけでlog-{checkbox-id}、基本的に次のようになります。

$(".menu input:checkbox").on("click", function() {
    if ($(this).is(":checked")) {
        $("#textValue").text($(this).val());
        $("#log").append("<span id=\"log-" + this.id + "\">" + this.id + "</span><br/>");
    }
    else {
        $("#log-" + $(this).attr("id")).remove();
    }
});​

これがフィドルです：http：//jsfiddle.net/crazytonyi/fLskG/7/

これの良い点は、値が既にリストにあるかどうかを確認する必要がないことです。これは、セレクターで値が見つからないためです。おそらく、挿入とHTMLの方法も強化するでしょうが、今のところ、idタグソリューションを表示するのに十分なコードを変更したかっただけです。

これが、少しきつく締められたものです。

$(".menu input:checkbox").on("click", function() {
    if ($(this).is(":checked")) {
        $("#textValue").text($(this).val());
        var $log_entry = $('<li>');
        $log_entry.attr("id", "log-" + this.id);
        $log_entry.text(this.id);
        $("#log").append($log_entry);
    }
    else {
        $("#log-" + $(this).attr("id")).remove();
    }
});​

ログがul中断などの必要がなくなったため、id属性とテキストを簡単に追加できることに注意してください。新しいデモ：http：//jsfiddle.net/crazytonyi/fLskG/12/

于 2012-05-05T18:15:42.370 に答える