Question

我原本想不出一种方法可以将附加类附加到具有其他li元素所具有的类的li元素。我想只在我点击一个选择按钮的特定li元素上添加一个类，解决方案是“点击按钮，你可以使用.closest（）来查找祖先li元素”。解决方案是一个jquery解决方案，它工作正常，但现在我有一个额外的问题。首先，这是我最初发布的内容以及我与小提琴一起提供的解决方案，然后我会解释我的新问题是什么，并希望得到帮助。所以我的原帖：

“好的，所以我的脚本允许我在textarea元素中输入文本，并将其添加到ID为”Glist“的有序列表中的li元素。不仅将文本添加到我添加到有序列表的每个li中，但是下面还添加了以下内容，它们都只是使用CSS显示其他图像。其中一个类“Selimg”显示一个按钮的精灵图像，上面写着“选择”。现在我添加到我的ol的每个li元素都有下面的所有元素以及类。所以每个li元素都有一个带有“Selimg”类的div，它显示一个按钮的图像，例如选择。当我用Selimg类点击这个div时，一个新的名为“Selected”的类将添加到div中，它将更改li的背景颜色以指示它已被选中。问题是，我只想将“Selected”类添加到带有Selimg类的div中我点击了，而不是所有带有“Selimg”类的li元素。如何使用onclick事件处理程序或任何其他wa来执行此操作使用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”创建div，它将是添加到我的列表项中的选择按钮的图像，然后给出onclick属性，调用上面的runSel（）函数，如您所见。有用。但它只能工作一次。小提琴示例展示了我正在寻找的东西。所以现在，当我将一个项目添加到列表中，然后单击其上的选择按钮时，将调用函数“runSel”，它会添加一个名为“liselected”的类，而liselected只会更改背景颜色，因为每个属性的规则都在css，有“！important”，所以背景颜色会覆盖当前颜色。它有效，但就像我说它只工作一次。在我添加另一个项目，并按下那个项目上的选择按钮（由Selimg类中的样式制成）后，liselected类将从其他li元素中删除，而第二个li元素我刚刚单击了选择按钮，只会导致liselected类从第一个类中移除，但之后不会添加到第二个li项，即当前的一个。因此，当我添加多个li时，它们将包含诸如文本和div之类的东西，看起来像一个“选择”的按钮，所以当我点击“选择”时，我想要那个特定的li来拥有附加了liselected类，当我在另一个li上选择“select”按钮时，我希望liselected类从它所在的其他li元素中删除并添加到该元素中。

Answer 1

不确定为什么你为这么小的问题写了一本书。我的意思是，我已经厌倦了阅读你在前30行没有达到问题的地方后所写的内容。

使用：$(this).parent('li').addClass("...")代替。

jsFiddle

Answer 2

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 ready处理程序中添加脚本

演示：Fiddle

我在上课时遇到了困难

2 个答案: