-1

我最初想不出一种方法来将附加类附加到具有其他 li 元素所具有的类的 li 元素上。我只想向单击选择按钮的特定 li 元素添加一个类,解决方案是“单击按钮时,您可以使用 .closest() 查找祖先 li 元素”。该解决方案是一个 jquery 解决方案,它工作正常,但现在我遇到了一个额外的问题。首先,这是我最初发布的内容以及与小提琴一起提供的解决方案,然后我将解释我的新问题是什么,并感谢您的帮助。所以我的原帖:

我只想将“Selected”类添加到具有我单击的 Selimg 类的 div 中,而不是所有具有“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”类创建 div,这将是添加到我的列表项的选择按钮的图像,然后它被赋予调用上面 runSel() 函数的 onclick 属性,如您所见。有用。然而,它只工作一次。小提琴示例演示了我在寻找什么。所以现在,当我将一个项目添加到列表中,然后单击其上的选择按钮时,会调用函数“runSel”,该函数会添加一个名为“liselected”的类,并且 liselected 只会更改背景颜色,因为每个属性的规则在css,具有“!important”,因此背景颜色会覆盖当前颜色。它有效,但就像我说的它只有效一次。添加另一个项目后,然后按该项目上的“选择”按钮(由 Selimg 类的样式制成),liselected 类已从另一个 li 元素中删除,但我刚刚单击选择按钮的第二个 li 元素,只会导致 liselected 类从第一个中删除,但之后不会添加到第二个 li 项,即当前项. 因此,当我添加多个 li 时,它们将包含文本和 div 之类的内容,其样式看起来像一个显示“选择”的按钮,因此当我在 li 上单击“选择”时,我希望该特定 li 具有附加了 liselected 类,当我选择另一个 li 上的“选择”按钮时,我希望将 liselected 类从它所在的另一个 li 元素中删除并添加到该类中。s 之后没有添加到第二个 li 项目,即当前项目。因此,当我添加多个 li 时,它们将包含文本和 div 之类的内容,其样式看起来像一个显示“选择”的按钮,因此当我在 li 上单击“选择”时,我希望该特定 li 具有附加了 liselected 类,当我选择另一个 li 上的“选择”按钮时,我希望将 liselected 类从它所在的另一个 li 元素中删除并添加到该类中。s 之后没有添加到第二个 li 项目,即当前项目。因此,当我添加多个 li 时,它们将包含文本和 div 之类的内容,其样式看起来像一个显示“选择”的按钮,因此当我在 li 上单击“选择”时,我希望该特定 li 具有附加了 liselected 类,当我选择另一个 li 上的“选择”按钮时,我希望将 liselected 类从它所在的另一个 li 元素中删除并添加到该类中。

4

2 回答 2

0

不知道你为什么要为这么小的问题写一本书。我的意思是,我厌倦了阅读你在前 30 行没有达到问题的重点之后写的内容。

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

jsFiddle

于 2013-10-10T02:36:19.490 回答
0

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

演示:小提琴

于 2013-10-10T02:39:02.677 回答