Question

事情已经失控了。最简单的解决方案开始膨胀到不再可管理的程度。我需要想出一种简化流程的方法。

目前，我有一张地图，其中的图钉表示全球特定国家/地区。当鼠标悬停在引脚上时，会出现隐藏的div。当您将鼠标移到另一个上时，前一个div将消失并打开一个新的div。我从其中的5个开始，这不是一个问题，但我不断收到更多的请求，并希望现在以不同的方式管理脚本。

$('#PH1').mouseenter(function () {
$('#BO2').hide();
$('#US2').hide();
$('#UK2').hide();
$('#CH2').hide();
$('#BZ2').hide();
$('#QC2').hide();
$('#OT2').hide();
$('#VA2').hide();
$('#RU2').hide();
$('#JT2').hide();
$('#HK2').hide();
$('#SH2').hide();
$('#BJ2').hide();
$('#XI2').hide();   
$('#BE2').hide();
$('#AT2').hide();
$('#FR2').hide();
$('#MX2').hide();
$('#PH2').show();
});

$('#PH1').click(function (e) {
e.stopPropagation();
});

$('#mint').click(function () {
$('#PH2').hide();
});

在这种情况下，div id＃PH1是引脚，当鼠标进入div时，它会隐藏所有其他div的＃** 2并显示与＃PH1相关的那个＃PH2

每个DIV都会重复此列表。每当我需要添加新的DIV时，我需要使每个现有列表更长，并创建一个新列表。如何使这个过程变得更加简单？

Answer 1

制作循环：

var all= ['#BO2', '#US2', '#UK2', '#CH2', '#BZ2', '#QC2', '#OT2', '#VA2', '#RU2', '#JT2', '#HK2', '#SH2', '#BJ2', '#XI2'   , '#BE2', '#AT2', '#FR2', '#MX2', '#PH2']

all.forEach(function (i){
    $(i).hide();
});

Answer 2

这不是一种正确的方法，你应该使用这个类。但是他们需要的是为所有ele1和#**1向所有ele2添加一个类添加类#**2：

然后

$('.ele1').mouseenter(function () {
    $(".ele2").hide();
    var id = this.id;
    var newId = id.substring(0,2)+"2";
    $("#"+newId).show();    
});

Answer 3

在要隐藏/显示的所有DIV上使用类选择器而不是ID。

首先，向所有DIV添加一个共享类，以便我们按类定位所有这些。

HTML: class="hidden-divs"

jQuery: $('.hidden-divs').hide();

然后显示相关的DIV。

$('#PH2').show();

使用您的第一个示例，它看起来像这样：

$('#PH1').mouseenter(function () { $('.hidden-divs').hide(); $('#PH2').show(); });

Answer 4

如果可以选择它们，可以使用jquery隐藏多个div。例如，假设您在所有div上都有一个公共类“.map_divs”，您可以轻松地执行此操作：

$(".map_divs").hide();

另外，您可以使用:hover在CSS上解决所有这些问题。例如：

.map_divs:hover {
    display: block;
}

Answer 5

如果您可以自己编辑div（如果它不是由库生成的话），我会这样做。

为所有div添加一个公共类。然后在每个div上，将data attribtue添加到相关的id。

<div class="pin" id="PH1" data-rel="PH2"></div>

然后你可以有这样一个简单的函数：

$(".pin").mouseenter(function() {
    var relatedId = $(this).data("rel");
    $(".pin[id$='2']").hide(); // Hide all pins with id ending in 2
    $("#" + relatedId).show() //show PH2
})

Answer 6

在这里使用类可能是更好的选择。然后，您可以将文档准备好的mouseenter事件附加到所有引脚。这也适用于无数个引脚。

＆＃13;

$('.pin').mouseenter(function () {
    $('.popup').removeClass('show');
    var id = this.id.split('_')[1];
    $('#popup_' + id).addClass('show');
});

＆＃13;

.pin {
    width:30px;
    height:30px;
    margin-bottom:20px;
    background-color:red;
}

.popup {
    display:none;
    width:100px;
    height:100px;
    margin-bottom:20px;
    background-color:blue;
}

.popup.show {
    display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pin_1" class="pin"></div>
<div id="popup_1" class="popup"></div>
<div id="pin_2" class="pin"></div>
<div id="popup_2" class="popup"></div>

＆＃13;

Answer 7

如果您的div元素如下所示，您可以使用css获得相同的结果，这将提高速度和整体体验（特别是在手机和平板电脑上）。

当“悬停”黄色方块时，即使“悬停”弹出窗口，弹出窗口也是可见的。

.pin {
    width:30px;
    height:30px;
    margin-bottom:20px;
    background-color:red;
}

.popup {
    display:none;
    width:100px;
    height:100px;
    margin-bottom:20px;
    background-color:blue;
}

.pin:hover + .popup {
    display:block;
}

.pin.type2 {
    background-color:yellow;
}

.pin.type2:hover .popup {
    display: inline-block;
    margin-top: 30px;
}

<div id="pin_1" class="pin"></div>
<div id="popup_1" class="popup"></div>
<div id="pin_2" class="pin"></div>
<div id="popup_2" class="popup"></div>

<div id="pin_3" class="pin type2"><div id="popup_3" class="popup"></div></div>
<div id="pin_4" class="pin type2"><div id="popup_4" class="popup"></div></div>

Javascript - 简化了一堆长重复的隐藏/显示功能

7 个答案: