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

Question

我有一个 html 页面显示不同国家的图片和 5 个 li 元素，其 id 代表 4 个国家，第 5 个 li 标签使所有图像都显示。通过点击一个 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');        
           });
});

更新

对于遇到此问题并且不打算使用对象的任何人 - 这是一个显示问题工作原理的 fiddle 。

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');             
      });
});