jQuery - 只隐藏那些可见的(jQuery - Hiding only those that are visible)

 我有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);
    }
});

I have 5 buttons that either hide or show corresponding points on an SVG map. #icon1, #icon2, #icon3, #icon4, and #icon5 are the five buttons. .poi-hover is a class that is applied to all of the points on the map.
 
jQuery Code for hide/show points
 
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();
    }
});
 
I am trying to make each point be able to hover and set all points that are visible to an opacity except for the one being hovered. I am doing this with the code below, but if I have any of the buttons turned off and hover on a visible point, it displays the points on the map that are supposed to be hidden. How do I fix this?
 
hover code:
 
$(".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);
    }
});

原文：