Javascript 需要干净的jQuery来更改父项'；当单击子项时，单击s类

当单击父元素的子元素以反映当前选择的子元素时，我需要一些添加/删除父元素类的方法。在这种情况下，选项卡方案中的UL父级和LI子级。我需要一种在UL上标记当前标签的方法，这样我就可以在UL上设置背景精灵的样式；因为在本例中，我的李的背景样式与图形不匹配

我是一个jQuery/Javascript/DOM新手，但能够为初学者拼凑出一个丑陋的解决方案

---

HTML

---

这似乎确实有效，但这是一个摸索的解决方案，我相信有更好的方法。你们中的一些jQuery忍者会知道如何优雅地将这些功能组合在一起，有什么帮助吗

此外，我还想在此基础上添加一个类，以便为单击的LI提供一个类，以显示它已被选中，而其他LI将从任何此类中删除。我已经在为UL做同样的事情；我可以看到如何用我笨拙的方法做到这一点，但这将意味着越来越多的凌乱代码行。若你们的改进还包括一种改变LIs课程的方法，我将不胜感激

---

仅供参考：我将jQuery工具选项卡与此结合使用，因此我展示了更多的jQuery，但只有我引用的部分似乎是相关的。

您可以这样做：

$('.tabs > li').click(function() {
    $(this).parent().attr('class', 'tabs').addClass('currenttab-'+$(this).attr('class'));
});

---

首先，您可以链接方法调用

$('.tabs').removeClass("currenttab-read currenttab-write").addClass("currenttab-write"); 

这将使代码更干净

编辑：我会用小提琴来试这些东西

注:

jQuery是可链接的

.removeClass（）

和

.addClass（）

可以通过使用空格同时处理多个类名（如

.removeClass（'class1 class2'）

）

---

完整解决方案：

var relevantClasses = ['read','write','info'];

$("UL.tabs LI A").bind('click',function(e){
  var $target = $(e.target);

  var relevantClass = '';
  for( var cl in $target.parents('LI').attr('class').split(' ') )
    if( jQuery.inArray(relevantClasses , cl) > -1 ){
      relevantClass = cl;
      break;
    }

  $target
   .parents('UL.tabs')
     .removeClass(jQuery.map(relevantClasses , function (className) { return 'currenttab-' + className; }).join(' '))
     .addClass('currenttab-'+relevantClass )
     .end()
   ;
});

html 如果您未将其用于其他目的，我将删除

li的
id
s

<ul class="tabs currenttab-info">
    <li class="info"><strong><a href="#">Information</a></strong></li>
    <li class="write"><strong><a href="#">Write Feedback</a></strong></li>
    <li class="read"><strong><a href="#">Read Feedback</a></strong></li>
</ul>

对不起，但他在要求一个更好的方法。链接比再次选择更好。此解决方案比原始解决方案更详细。不是！阅读并理解代码。我告诉他在哪里可以做他想做的事。如果他不想从参数“UL.tabs”中删除类，他可以在“.parents”（“UL.tabs”）下执行。“.parents（'LI'）”只是另一个例外。在我看来，他可以有这么多他不喜欢的人。他只编写了一次代码，因为它一次绑定到所有链接。@Yves M:请看我编辑。我已经发布了一个完整的解决方案，可以同时处理所有标签链接。它短小、清晰、坚韧、可扩展，这就是我所知道的那种紧凑而优雅的过程。正是我需要的结构，谢谢你的回答！起初，这并没有完全奏效。我认为它不能正常运行的原因可能是因为脚本的第一部分向LI添加了一个额外的类名；脚本的第二部分不能再干净地传递主类名了？这只是我对发生了什么的猜测，但一旦我稍微改变了一些事情，第二部分就会在课堂上传递孩子id，并改变所有的LI id以适应。我采用了Reigel的解决方案，但这看起来也会起作用，而且比我原来的解决方案干净一百倍。谢谢你的回答：）
$("UL.tabs LI A").bind('click',function(e){ //bind a Click-Event handler to the Links
  var $target = $(e.target); //the jQuery-Object-Reference to the clicked target ( $(this) should work too)
  var LIClasses =  $target.parents('LI').attr('class'); //A list of all Classes the parrent LI of the clicked Link have

  $target
   .parents('UL.tabs')
     //now you can remove and add classes to the parent "UL.tabs"
     .removeClass('...')
     .addClass('...')
     .end() //after .end() the chain for .parents-match is broken
   .parents('LI')
     //here you can add and remove classes from the parent LI
     .removeClass('...')
     .addClass('...')
     .end() //after .end() the chain for .parents-match is broken
   ;
});

var relevantClasses = ['read','write','info'];

$("UL.tabs LI A").bind('click',function(e){
  var $target = $(e.target);

  var relevantClass = '';
  for( var cl in $target.parents('LI').attr('class').split(' ') )
    if( jQuery.inArray(relevantClasses , cl) > -1 ){
      relevantClass = cl;
      break;
    }

  $target
   .parents('UL.tabs')
     .removeClass(jQuery.map(relevantClasses , function (className) { return 'currenttab-' + className; }).join(' '))
     .addClass('currenttab-'+relevantClass )
     .end()
   ;
});

<ul class="tabs currenttab-info">
    <li class="info"><strong><a href="#">Information</a></strong></li>
    <li class="write"><strong><a href="#">Write Feedback</a></strong></li>
    <li class="read"><strong><a href="#">Read Feedback</a></strong></li>
</ul>

$('.tabs li').click(function() {

    var $li = $(this);

    $li.addClass('current').siblings().removeClass('current'); // adds a current class to the clicked li

    var $ul = $li.parent();

    $ul.removeClass("currenttab-info currenttab-read currenttab-write")
       .addClass("currenttab-" + this.class );  // assuming li only holds one class e.g. class="write"
});