У меня возникли трудности с добавлением класса

Question

Первоначально я не мог придумать способ добавления дополнительного класса к элементу li, который имел класс, который имел другие элементы li. Я хотел только добавить класс к этому конкретному элементу li, который я нажал на кнопку выбора, и решение было «При нажатии кнопки вы можете использовать .closest(), чтобы найти элемент предка li». Решение было решением jquery, и оно отлично работает, но теперь у меня есть дополнительная проблема. Во-первых, вот что я изначально разместил, и решение, которое я дал вместе со скрипкой, а затем я объясню, что моя новая проблема, и будет благодарна за помощь. Итак, мой оригинальный пост:

«Хорошо, поэтому мой скрипт позволяет мне вводить текст в элементе textarea и добавлять его в элемент li в упорядоченном списке с идентификатором« Glist ». Не только добавляется текст для каждого li I добавьте в упорядоченный список, но добавляются дополнительные вещи ниже, и все они просто отображают дополнительные изображения с помощью CSS. Один из классов «Selimg» отображает изображение спрайта с кнопкой «select». Теперь каждый элемент li Я добавляю к моему ol все элементы ниже, а также классы. Таким образом, каждый элемент li будет иметь div с классом «Selimg», который отображает изображение кнопки, которая говорит select например. Когда я нажимаю этот div с класс Selimg, новый класс с именем «Selected» будет добавлен в div, который изменит цвет фона li, чтобы указать, что он был выбран. Проблема в том, что я хочу добавить только класс «Selected» div с th e Selimg класс, который я нажал, а не все элементы li с классами «Selimg». Как я могу сделать это с помощью обработчика события onclick или любым другим способом, используя js или jquery? Вот HTML:

<ol id="GList"> 
    <li class="MyList"> 
     <p class="bulletp"></p> 
     <!--This Selimg class displays an image of a button that says select--> 
     <div class="Selimg"></div> 
     <!--When a user presses this select button, I want to append a class only to the specific li element the user has pressed the select button on. --> 
     <div class="edit1"></div> 
     <div class="Del"></div> 
     <div class="progress"></div> 
     <div class="ShowMore"></div> 
     <div class="CheckedGoal"></div> 
     <div class="PCompetePercent"></div> 
     <div class="ShowMoreBlock"></div> 
     <div class="goalTxt"></div> 
    </li> 
</ol> 

The solution I was given: 

"On the click of the button, you can use .closest() to find the ancestor li element" 

$('.Selimg').click(function() { 
    $(this).closest('li').addClass('someclasss') 
    //or $(this).parent().addClass('someclasss') since the li is the parent of the button 
}) 

вот скрипку демонстрирует решение: http://jsfiddle.net/arunpjohny/fSMDv/2/

А теперь для нового выпуска. По какой-то причине решение jquery не работало самостоятельно. Так или иначе, код JQuery выше только работал, когда я положил его в функцию JS, как это:

<script> 
    function runSel() { 
    var $li = $('.Selimg').closest('li').addClass('liselected'); 
    $li.siblings().removeClass('liselected'); 
    } 
</script> 

У меня также есть функция, которая вызывается всякий раз, когда я хочу добавить еще один элемент в списке.

//This is only the part of the code that creates the div that I style to look like and be used as a button that says select. There's more code that also creates the li element itself and a few additional things but all for design. Nothing important. 

var Selimg = document.createElement('div'); 
Selimg.setAttribute("class", "Selimg"); 
Selimg.setAttribute("onclick", "runSel();"); 
entry.appendChild(Selimg); 

Что это делает, создайте DIV с классом «Selimg», который будет изображением кнопки выбора добавленной в список элемент, а затем он дал атрибут OnClick, который вызывает функцию runSel() выше как вы видете. Оно работает. Однако он работает только один раз. Пример скрипта демонстрирует то, что я ищу. Итак, теперь, когда я добавляю элемент в список и нажимаю кнопку выбора на нем, вызывается функция «runSel», которая добавляет класс «liselected» и liselected только меняет цвет фона, потому что правила для каждого свойства в css, имеют «! important», поэтому цвет фона переопределяет текущий. Он работает, но, как я сказал, он работает только один раз. После того, как я добавлю еще один элемент и нажмите кнопку «Выбрать» на этом (который сделан из стилей из класса Selimg), выделенный класс удаляется из другого элемента li, но второй элемент li, который я просто нажал на кнопку выбора на , только исключает удаление выделенного класса из первого, но после этого он не добавляется ко второму элементу li, текущему. Таким образом, когда я добавляю несколько li, они будут содержать такие вещи, как текст и стиль div, похожий на кнопку, которая говорит «select», и поэтому, когда я нажимаю «select» на li, я хочу, чтобы для этого конкретного li liselected class добавлен, и когда я выбираю кнопку «select» на другом li, я хочу, чтобы класс, который был удален, был удален из другого элемента li, который был включен, и добавил к нему.

Answer 1

Решение JQuery будет работать нормально ... проблема в том, что вы имеете дело с динамически создаваемых элементов ... поэтому необходимо использовать событие делегации

$(document).on('click', '.Selimg', function() { 
    $(this).closest('li').addClass('someclasss') 
    //or $(this).parent().addClass('someclasss') since the li is the parent of the button 
}) 

Кроме того, с чем я вас понимаю не добавили скрипт в йот готовый обработчик

Demo: Fiddle

Answer 2

Не знаете, почему вы написали книгу для такой маленькой проблемы. Я имею в виду, я устал читать то, что вы написали после первых 30 строк, не доходя до сути вопроса.

Использование: $(this).parent('li').addClass("...") вместо.

jsFiddle