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

<强>更新

对于任何遇到这种情况并且不打算使用对象的人来说 - 这是一个表示问题原理的小提琴。

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

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

1 个答案: