Если span содержит ID, то

Question

У меня возникли трудности при попытке сделать if-statement с $(this).attr("id"). Хочу, чтобы я хотел, чтобы при щелчке флажка AND и его идентификатор регистрировался в div #log (это работает). Когда он щелкнут и не будет отмечен, jQuery должен проверить, совпадает ли зарегистрированная строка с идентификатором этого флажка. Если это так, этот диапазон должен быть удален.

Вот jsfiddle: http://jsfiddle.net/fLskG/1/

Итак, когда вы нажимаете Option 1 текст option-0 появится (это идентификатор CheckBox в). Когда вы снова нажмете кнопку, этот текст должен исчезнуть.

Вот сценарий:

$(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 проверкой наличия диапазона, который содержит идентификатор флажка, установленного в первой функции.

Спасибо.

Answer 1

Вы могли бы принять атрибут данных HTML5, но так как это один-к-одному, я просто пошел с приданием пролета идентификатора 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/

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

просто проверить это. Я думаю, вы должны удалить только SPAN непроверенным CheckBox в

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