我在添加類時遇到困難

Question

我原本想不出一種方法將附加類附加到具有其他李元素的類的li元素。我只想添加一個類到特定的li元素，我點擊了一個選擇按鈕，解決方案是「在點擊按鈕時，可以使用.closest（）來查找祖先li元素」。該解決方案是一個jQuery解決方案，它工作正常，但現在我有一個額外的問題。首先，這是我最初發布的內容，以及我隨小提琴一起提供的解決方案，然後我將解釋我的新問題，並希望得到幫助。所以我原來的帖子：

「好吧，我的腳本允許我在textarea元素中輸入文本，並將它添加到ID爲」Glist「的有序列表中的li元素。不僅將文本添加到每個li我添加到有序列表中，但是下面的其他內容也被添加，並且它們都只是使用CSS顯示附加圖像，其中一個類「Selimg」顯示一個按鈕的精靈圖像，顯示「select」。我添加到我的ol下面的所有元素以及類，因此每個li元素將有一個「Selimg」類的div，顯示一個按鈕的圖像，例如選擇。類Selimg，一個名爲「Selected」的新類將被添加到div中，這將改變li的背景顏色以表明它已被選中。問題是，我只想將「Selected」類添加到div與th我已經點擊過的Selimg類，而不是所有具有「Selimg」類的li元素。我該如何使用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); 

這樣做是什麼，創建一個類「Selimg」的股利將被添加到我的列表項選擇按鈕的圖像，然後它給調用上面的runSel（）函數onclick屬性如你看到的。有用。但它只能使用一次。小提琴示例演示了我在找什麼。所以現在，當我添加一個項目到列表中，並點擊它上面的選擇按鈕時，調用函數「runSel」，它添加了一個名爲「liselected」的類，並且liselected只是更改背景顏色，因爲每個屬性的規則css，有「！重要」，所以背景顏色會覆蓋當前的顏色。它可以工作，但正如我所說，它只能工作一次。添加另一個項目後，按下該選擇按鈕（由Selimg類中的樣式構成），將從另一個li元素中刪除已選中的類，然後單擊第二個li元素，然後單擊該選擇按鈕，只會導致第一個被選中的類從第一個被刪除，但不會被添加到第二個li項目中，即當前的那個。所以，當我添加多個li時，它們將包含像文本和div這樣的樣式，使其看起來像一個說「select」的按鈕，所以當我在li上單擊「select」時，我想要那個特定的li具有當我在另一個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 
}) 

而且從我個人理解你還沒有添加腳本在DOM準備處理

演示：Fiddle

Answer 2

不確定爲什麼你爲這麼小的問題寫了一本書。我的意思是，我厭倦了閱讀第一個30行之後你寫的內容。

改爲使用：$(this).parent('li').addClass("...")。

jsFiddle