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类。但是当点击其他元素时，例如常见问题解答，需要删除此类，并且需要应用常见问题解答的类及其父类。写的javascript函数对图标做了同样的事情，但它应用了同一个类并从所有元素中删除了相同的类。我们也可以根据ie $('i + span > span')的类来挑出元素。我该怎么做？

Answer 1

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

所以你已经拥有.dnld-text的CSS必须

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

一步一步：

定位元素menu-text

menu-item-text

i元素与类dnld-logo以及何时为activatedd

如何根据里面的文字对不同的元素应用不同的类？

1 个答案: