span에 ID가 포함 된 경우

Question

if 문을 $(this).attr("id")으로 만들려고 할 때 문제가 있습니다. 원하는 것은 체크 박스를 클릭하고 체크했을 때 ID가 #log (이 작동)입니다. 그것이 클릭되고 체크되지 않을 때, jQuery는 로그 된 라인이 체크 박스의 ID와 동일한지를 체크해야한다. 그렇다면 스팬이 제거되어야합니다. 당신이 Option 1을 클릭하면 http://jsfiddle.net/fLskG/1/

그래서 option-0이 나타납니다 텍스트가 (이 체크 박스의 ID입니다) : 여기

는 jsfiddle이다. 버튼을 다시 클릭하면 해당 텍스트가 사라집니다. 나는이 문제는 '포함'로 자리 잡고 있습니다 확신합니다

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

: 여기

는 스크립트입니다. 하지만 jQuery가 첫 번째 함수에서 체크 된 체크 박스의 ID를 포함하는 스팬이 있는지 확인하는 방법을 모르겠습니다.

감사합니다.

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 태그 솔루션을 보여줄 정도로 코드를 수정하기를 원했습니다.

는 여기 조금가 강화된다 : 로그 등 휴식을위한 ul 그래서 필요 쉽게 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(); 
    } 
});​ 

공지있다. 새로운 데모 위치 : http://jsfiddle.net/crazytonyi/fLskG/12/

Answer 2

$("#log").children("span").contains($(this).attr("id")) 대신 $('#log span:contains("'+ this.id +'")')을 사용하십시오. . "메뉴". "체크 박스 입력"))} {() (

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

을 기능을 클릭하고

을

$ (문서) .ready (함수() { $()는 (찾을 수 있습니다.

DEMO

Answer 3

는이를 확인. 난 당신 만 체크되지 않은 체크 박스의 범위를 제거 할 수 있다고 생각

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