Javascript 如何根据里面的文本在不同的元素上应用不同的类？

HTML

<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-401 dt-mega-menu mega-auto-width mega-column-3">
    <a href='#' data-level='1'>
        <i class="logo-png dnld-logo"></i>
        <span class="menu-item-text">
                <span class="menu-text">Download App</span>
        </span>
    </a>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71">
    <a href='#' data-level='1'>
        <i class="logo-png subs-logo"></i>
        <span class="menu-item-text">
                <span class="menu-text">Purchase Subscription</span>
        </span>
    </a>
</li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-74 has-children">
    <a href='#' class='not-clickable-item' data-level='1'>
        <i class="logo-png help-logo"></i>
        <span class="menu-item-text">
                <span class="menu-text">Help</span>
        </span>
    </a>
    <ul class="sub-nav gradient-hover hover-style-click-bg level-arrows-on">
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-66 first">
            <a href='#' data-level='2'>
                <i class="logo-png faqs-logo"></i>
                <span class="menu-item-text">
                        <span class="menu-text">FAQS</span>
                </span>
            </a>
        </li>
        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68">
            <a href='#' data-level='2'>
                <i class="logo-png vid-logo"></i>
                <span class="menu-item-text">
                        <span class="menu-text">Instructional Videos</span>
                </span>
            </a>
        </li>
    </ul>
</li>

像这样的元素有20多种。对于最内部的跨度，有一个不同的类，只有在单击该类时才应应用该类。这些类只包含文本的颜色

JQuery

(function($) {
    $(document).ready(function() {
        $('li.act > a > i').removeClass('logo-png').addClass('activatedd');

        function addEventListenerByClass(className, event, fn) {
            var list = document.getElementsByClassName(className);
            for (var i = 0, len = list.length; i < len; i++) {
                list[i].addEventListener(event, fn, true);
            }
        }

        addEventListenerByClass('menu-item', 'click', showIcon);

        var cssClasses = ['home-text', 'about-text', 'print-text', 'dnld-text', 'subs-text', 'help-text', 'sorks-text', 'cont-text', 'work-text', 'col-text', 'body-text', 'hst-text', 'space-text', 'cell-text', 'organ-text', 'system-text', 'cs-text', 'ae-text', 'ag-text', 'bsi-text', 'med-text', 'tudors-text', 'roma-text', 'vict-text', 'vik-text', 'ww-text', 'ss-text', 'pe-text', 'sc-text', 'faqs-text', 'vid-text', 'email-text', 'trial-text', 'next-text'];


        function showIcon() {
            $("#primary-menu .act").removeClass("act");
            $("#primary-menu .activatedd").removeClass("activatedd").addClass("logo-png");
            //Add active class for is parent if it is level 1
            $(this).addClass("act").parents("li").addClass("act");
            $('> a > i', $(this)).removeClass("logo-png").addClass("activatedd").parents().find("li.act>a>i.logo-png").removeClass("logo-png").addClass("activatedd");
        }
    })
})(jQuery);

（函数（$）{
$（文档）.ready（函数（）{
$（'li.act>a>i'）.removeClass（'logo-png'）.addClass（'activatedd'）；
函数addEventListenerByClass（类名、事件、fn）{
var list=document.getElementsByClassName（className）；
for（变量i=0，len=list.length；ia>i'，$（this））.removeClass（“logo png”）.addClass（“activatedd”）.parents（）.find（“li.act>a>i.logo-png”）.removeClass（“logo png”）.addClass（“activatedd”）；
}
})
})（jQuery）；

var cssClasses

包含我们必须应用的所有类。现在对于给定的HTML，

Download App

将应用

dnld text

类。但是当单击其他元素时，例如FAQs，需要删除该类，并应用FAQs的类及其父类.

---

所编写的javascript函数对图标也有同样的作用，但它应用了相同的类，并从所有元素中删除了相同的类。我们还可以根据类（即，

$（'i+span>span'）选择元素

。我该怎么做呢？

据我所知，您根本不需要添加这些类，只要在

i

元素具有类

时使用具有结构目标的CSS即可。类似这样的activatedd

例如用于下载文本：

因此，您已经在CSS for

上使用了相同的方法。必须使用dnld text

i.dnld-logo.activatedd + .menu-item-text .menu-text {
  color:red;
}

逐步：

• 针对元素

  菜单文本
  

• 菜单项文本的子项

• i

  元素与类

  dnld徽标的同级
  

---

我很确定这会很好。让我试试。谢谢！@UmerFarooq yeah mate在删除所有特定的类名后，尝试一下你无法避免的方式。我爱你，伙计！这件事已经让我疯狂了三天。效果很好！：）@UmerFarooq真的很高兴帮助你的朋友