禁用Javascript中的切換開關

Question

此腳本旨在映射兩個小隔間之間的位置，以便大型辦公大樓中的人們可以弄清楚需要去哪里才能找到另一個人。 我差不多了...

我有兩個正在使用的下拉菜單。

默認情況下，頁面上的點顯示。

每個點對應於下拉列表上的名稱。

當您在第一個下拉菜單下選擇名稱時，另一個點將消失，然后，如果您在另一個下拉菜單下選擇名稱，第一個點將消失。

我想發生的是-從下拉列表中選擇兩個名稱時，兩個點同時顯示。

我可以選一個，但不能選兩個。

這是我必須在兩者之間切換的JS ...

$('#mapMe').change(function() {

        var selectedMeChoice = $('#mapMe option:selected').val();
        if (selectedMeChoice == 'ALL'){
            $('a.dot').slideDown(1000);
        }else{
            $('a.dot[mechoice = "'+selectedMeChoice+'"]').slideDown(1000);
            $('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
        }

    });


$('#mapThem').change(function() {

        var selectedThemChoice = $('#mapThem option:selected').val();
        if (selectedThemChoice == 'ALL'){
            $('a.dot').slideDown(1000);
        }else{
            $('a.dot[themchoice = "'+selectedThemChoice+'"]').slideDown(1000);
            $('a.dot[themchoice != "'+selectedThemChoice+'"]').slideUp(1000);
        }

    });

我認為這與slideUp / slideDown函數有關，但我無法弄清楚...

有一個的jsfiddle 這里 。

Answer 1

您不會以任何方式區分“他們”和“我”，因此您隱藏了應該顯示的另一個。 嘗試這樣的操作，只隱藏正確的點：

$(".me").removeClass("me");
$('a.dot[mechoice = "'+selectedMeChoice+'"]').addClass("me").slideDown(1000);
$("a.dot").not(".me, .them").slideUp(1000);

http://jsfiddle.net/XvHJS/10/

這樣，您將只隱藏先前的“我”，而不隱藏所有內容，包括活動的“他們”。

Answer 2

$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);

也消除那些沒有memchoice可言，包括那些themchoice 。 我建議使用不同的類dotme和dotthem代替。