如何使用javascript对象显示/隐藏图像

Question

我有一个html页面显示不同国家的图片和代表4个国家的I的5 li元素，第5 li标签使所有图像显示。点击一个里标签(它代表窗帘国家)，只有那个国家的图片留下，其他的消失。但是我要做的是用对象来编写javascript代码。我对JS非常陌生，我不知道该如何做：

这是我的JS代码：

(function() {
    document.getElementById('all').addEventListener('click', showAll);
    document.getElementById('italy').addEventListener('click', showItaly);
    document.getElementById('france').addEventListener('click', showFrance);
    document.getElementById('croatia').addEventListener('click', showCroatia);
    document.getElementById('montenegro').addEventListener('click', showMontenegro);

    var italyCities = document.getElementsByClassName('italyCities');
    var franceCities = document.getElementsByClassName('franceCities');
    var croatiaCities = document.getElementsByClassName('croatiaCities');
    var montenegroCities = document.getElementsByClassName('montenegroCities');

    // onclick show all cities
    function showAll() {
        for (let i = 0; i < italyCities.length; i++) {
            italyCities[i].style.display = 'inline-block';
            franceCities[i].style.display = 'inline-block';
            croatiaCities[i].style.display = 'inline-block';
            montenegroCities[i].style.display = 'inline-block';
        }
    }

    // onclick show only italian cities
    function showItaly() {
        for (let i = 0; i < italyCities.length; i++) {
            franceCities[i].style.display = 'none';
            croatiaCities[i].style.display = 'none';
            montenegroCities[i].style.display = 'none';
            italyCities[i].style.display = 'inline-block';
        }
    }

    // onclick show only french cities
    function showFrance() {
        for (let i = 0; i < franceCities.length; i++) {
            italyCities[i].style.display = 'none';
            croatiaCities[i].style.display = 'none';
            montenegroCities[i].style.display = 'none';
            franceCities[i].style.display = 'inline-block';
        }
    }

    // onclick show only croatian cities
    function showCroatia() {
        for (let i = 0; i < croatiaCities.length; i++) {
            italyCities[i].style.display = 'none';
            franceCities[i].style.display = 'none';
            montenegroCities[i].style.display = 'none';
            croatiaCities[i].style.display = 'inline-block';
        }
    }

    // onclick show only montenegro cities
    function showMontenegro() {
        for (let i = 0; i < montenegroCities.length; i++) {
            italyCities[i].style.display = 'none';
            franceCities[i].style.display = 'none';
            croatiaCities[i].style.display = 'none';
            montenegroCities[i].style.display = 'inline-block';
        }
    }
})();

Answer 1

我觉得你把事情复杂化了。与其为每个地方设置一个函数，只改变您想要显示的位置的内联样式，还可以隐藏其余部分，您可以使用一个函数来完成所有这些操作……

如果要对所有城市使用通用类，比如.city，您可以同时在所有城市之间切换一个隐藏/显示类。

CSS

.hide {
    display:none;
}
.show {
    display:block;
}

JS

 $(document).ready(function() {   
            $(".city").addClass('hide'); 
            $("li:first-child").click(function() { 
               $(".city").removeClass('show'); 
               $(".city:nth-child(2)").addClass('show');
            });
            $("li:nth-child(2)").click(function() { 
              $(".city").removeClass('show'); 
              $(".city:nth-child(3)").addClass('show');
            });
            $("li:nth-child(3)").click(function() { 
              $(".city").removeClass('show'); 
              $(".city:nth-child(4)").addClass('show');
            });
            $("li:last-child").click(function() { 
              $(".city").addClass('show');        
           });
});

更新

对于那些不打算使用对象的人来说--这里有一个小提琴，展示了这个问题的原理。

https://jsfiddle.net/shzq8fd5/10/

原始代码应答

CSS

.show {
     display:block;
 }
 .hide {
     display:none;
 }

个别城市功能：

$(document).ready(function() {  
      $(".city").addClass('hide');    
      $(".city").click(function() {
          $(".city").removeClass('show'); 
          $(this).addClass('show');
      });
});

发挥全城市功能

 $(document).ready(function() {       
      $(".city").click(function() {              
          $(".city").addClass('show');             
      });
});