Question

最后找到了一些代码，它们会改变svg在DOM中悬停元素之上的悬停颜色，但现在我想为它添加一些逻辑。

HTML

$ ... | ... | ... | awk '{print $2}' | xargs -L1 mv ~/

的JavaScript

<div class="tag--active grid__item small--one-third medium--one-third large--one-third xlarge--one-third">                              
    <div class="tag-container">
        <a class="svg-filter-link" href="">
            <div class="top clearfix">
            <!--?xml version="1.0" encoding="UTF-8" standalone="no"?-->
                <svg width="41px" height="48px" viewBox="0 0 41 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
                    <title>filter-icn-bedbug</title>
                    <desc>Created with Sketch.</desc>
                    <defs></defs>
                    <g id="Pest-Peeve-Web" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="Shopfront" transform="translate(-402.000000, -706.000000)" fill="#C8C8C8">
                            <g id="filter-icn-pest" transform="translate(154.000000, 698.000000)">
                                <path d="M284.00492,...bunch of numbers... L277.822737,10.9244995 Z" id="filter-icn-bedbug"></path>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
        </a>
        <div class="bottom">
            <a title="Title" href="/collections/tag">Link Text</a>
        </div>
    </div>
</div>

此时，svg会在悬停时改变颜色，然后在不悬停时改回颜色。然而，问题是＆＃34;标签 - 活跃＆＃34;页面加载时，图标（活动链接）已突出显示，因此将鼠标悬停在其上后，将删除突出显示。

我想添加逻辑说，＆＃34;如果它已经是这种颜色，不要做任何事情＆＃34;，但以下不会起作用：

$(document).on({
        mouseenter: function () {
            $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'});
        },
        mouseleave: function () {
            $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'});
        }
}, ".tag-container a");

我想我必须使用错误的语法。你会怎么做？

Answer 1

使用not()过滤器代替if()。

$(document).on('mouseenter mouseleave',  ".tag-container a", function(event) {
  var fillColor = event.type === 'mouseenter' ? '#0BACFF' : '#939393';
  $(this).closest(".grid__item").not('.tag--aactive').find('svg path').css({ 'fill': fillColor });
});

Answer 2

你不能按照你想要的方式去做，但你可以这样做：

$(document).on({
        mouseenter: function () {
            if ($(this).closest(".grid__item").hasClass("tag--active") == 'false') {
                $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'});
            }
        },
        mouseleave: function () {
            if ($(this).closest(".grid__item").hasClass("tag--active") == 'false') {
                $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'});
            }
        }
    }
}, ".tag-container a");

Answer 3

尝试使用这样的，

$(document).on(".tag-container a", 'mouseenter' function(){
    if ($(this).closest(".grid__item").hasClass("tag--active")) {
        $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'});

    }
});

$(document).on(".tag-container a", 'mouseleave' function(){
    $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'});
});

Answer 4

您不能在对象表达式中声明语句，但可以在块内，正文内或序列表达式内声明语句。

编辑代码时，我没有使用'if'语句，而&&运算符在$.fn.on的第一个参数中声明的每个函数的块内运行单个操作

(document).on({

    mouseenter: function () {
        // condition
        !$(this).closest(".grid__item").hasClass("tag--active") &&
        $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'});
    },

    mouseleave: function () {
        // condition
        !$(this).closest(".grid__item").hasClass("tag--active") &&
        $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'});
    }

}, ".tag-container a");

你能在.on（）函数中放一个if / else语句吗？

4 个答案: