スパンにIDが含まれている場合

Question

if文を$(this).attr("id")にしようとすると問題が発生します。私が欲しいのは、チェックボックスをクリックしてチェックすると、そのIDが#logのdivに記録されているということです（これは機能します）。クリックされてチェックされていない場合、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がチェックする方法はわかりません。

ありがとうございました。

Answer 1

あなたは、HTML5のデータ属性を採用でき、それは一対一だから、私はちょうどので、基本的には、スパンにlog-{checkbox-id}の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タグソリューションを示すだけのコードを修正したかっただけです。

ここでは少しアップ締め、次のとおりです。ログは、それが簡単にid属性とテキストを追加することなど、今休憩のためulそれほど必要ではないことを

$(".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(); 
    } 
});​ 

注意してください。新しいデモ：http://jsfiddle.net/crazytonyi/fLskG/12/

Answer 2

$("#log").children("span").contains($(this).attr("id"))の代わりに$('#log span:contains("'+ this.id +'")')を使用してください。

$（ドキュメント）.ready（関数（）{ $（ "メニュー。 "）（" 入力：チェックボックス" 見つける。）（関数（）{

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(); 
    } 
}); 

を}）をクリックしてください。

。

DEMO

Answer 3

ちょうどこれを確認してください。私はあなたが

のみ未チェックのチェックボックスのスパンを削除するために持っていると思います

$(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(); 
      } 
     } 
    }); 
});