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

Question

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);

var cssClasses包含我们必须应用的所有类。现在对于给定的 HTML，<span class="menu-text">Download App</span>将被应用dnld-text类(class)。但是当单击其他元素时，例如 FAQs，需要删除该类，并且需要应用 FAQs 的类及其父类。 编写的 javascript 函数对图标做同样的事情，但它应用相同的类并从所有元素中删除相同的类。我们还可以根据类别挑出元素，即 $('i + span > span') .我应该怎么做？

Answer 1

据我了解您的问题，当 i 元素具有类 .activatedd 时，您根本不需要添加这些类，只需使用带有结构定位的 CSS例如下载文本:

所以你已经在 .dnld-text 上的 CSS 必须是

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

一步一步:

• 定位元素 menu-text
• menu-item-text 的 child
• i 元素的兄弟元素，类为 dnld-logo 以及何时 activatedd