Question

我有5个按钮可隐藏或显示SVG地图上的相应点。＃icon1，＃icon2，＃icon3，＃icon4和＃icon5是五个按钮。 .poi-hover是一个应用于地图上所有点的类。

隐藏/显示点的jQuery代码

var clickOne = true;
var clickTwo = true;
var clickThree = true;
var clickFour = true;
var clickFive = true;

$("#icon1").toggle(function () {
    clickOne = false;
    $(".outdoors").hide();
}, function () {
    clickOne = true;
    $(".outdoors").show();
});

$("#icon2").toggle(function () {
    clickTwo = false;
}, function () {
    clickTwo = true;
});

$("#icon3").toggle(function () {
    clickThree = false;
    $(".icons").hide();
}, function () {
    clickThree = true;
    $(".icons").show();
});

$("#icon4").toggle(function () {
    clickFour = false;
    $(".events").hide();
}, function () {
    clickFour = true;
    $(".events").show();
});

$("#icon5").toggle(function () {
    clickFive = false;
}, function () {
    clickFive = true;
});

$("#icon2, #icon3").click(function () {
    if (clickTwo == false && clickThree == false) {
        $(".groupsandicons").hide();
    } else {
        $(".groupsandicons").show();
    }
});

$("#icon1, #icon3").click(function () {
    if (clickOne == false && clickThree == false) {
        $(".agusta").hide();
    } else {
        $(".agusta").show();
    }
});

$("#icon1, #icon5").click(function () {
    if (clickOne == false && clickFive == false) {
        $(".lyons").hide();
    } else {
        $(".lyons").show();
    }
});

$("#icon4, #icon5").click(function () {
    if (clickFour == false && clickFive == false) {
        $(".ragbrai").hide();
    } else {
        $(".ragbrai").show();
    }
});

我正在尝试让每个点都能够悬停并设置除了悬停的不透明度之外的所有不透明点。我使用下面的代码执行此操作，但如果我关闭了任何按钮并将鼠标悬停在可见点上，则会显示地图上应隐藏的点。我该如何解决这个问题？

悬停代码：

$(".poi-hover").on({
    mouseenter: function () {
        $(".poi-hover").not(this).css('opacity', 0.2);
        $(".button_pannel").css('opacity', 0.5);
    },
    mouseleave: function () {
        $(".poi-hover").css('opacity', 1);
        $(".button_pannel").css('opacity', 1);
    }
});

Answer 1

使用：.is(':visible')将显示可见的

$(".poi-hover").on(
    {
        mouseenter: function()
        {
            //$(".poi-hover").css('opacity', 0.2);
            $('.poi-hover:visible').not(this).css('opacity', 0.2);
            $(".button_pannel").css('opacity',0.5);
        },
        mouseleave: function()
        {
            $(".poi-hover").css('opacity',1);
            $(".button_pannel").css('opacity',1);
        }
     });

Answer 2

我不确定我是否正确地解释了你的代码（它可能会被重构以消除所有这些切换函数），但其中一个应该可以工作：

$('.poi-hover').not(this).is(':visible').css('opacity', 0.2);

或

$('.poi-hover').not(this).not(':visible').css('opacity', 0.2);

jQuery - 只隐藏那些可见的

2 个答案: