Question

使用下面的代码是必需的，所以当我单击所有，北，东，南或西时，仅显示与这些类关联的图像

<ul>
<li>All</li>
<li>North</li>
<li>East</li>
<li>South</li>
<li>West</li>
</ul>

<div class="container">
<div><img src="image1" class="north all"></div>
<div><img src="image2" class="east all"></div>
<div><img src="image3" class="south all"></div>
<div><img src="image4" class="west all"></div>
<div><img src="image5" class="west all"></div>
<div><img src="image6" class="north all"></div>
<div><img src="image7" class="south all"></div>
<div><img src="image8" class="south all"></div>
</div>

Answer 1

var list = document.querySelectorAll('#list li')

for(let i = 0; i < list.length; i++) {
  var item = list[i];
  item.addEventListener('click', function (e) {
    var cl = e.target.innerHTML.toLowerCase();
    if (cl != 'all') {
      var all = document.querySelectorAll('.all')
      for (let j = 0; j < all.length; j++) {
        let a = all[j];
        a.style.display = 'none';
      }
    }
    var all = document.querySelectorAll('.' + cl)
      for (let j = 0; j < all.length; j++) {
        let a = all[j];
        a.style.display = 'block';
      }
  })
}

.all {
  display: none;
}

<ul id="list">
<li>All</li>
<li>North</li>
<li>East</li>
<li>South</li>
<li>West</li>
</ul>

<div class="container">
  <div><img src="image1" class="north all"></div>
  <div><img src="image2" class="east all"></div>
  <div><img src="image3" class="south all"></div>
  <div><img src="image4" class="west all"></div>
  <div><img src="image5" class="west all"></div>
  <div><img src="image6" class="north all"></div>
  <div><img src="image7" class="south all"></div>
  <div><img src="image8" class="south all"></div>
</div>

Answer 2

类名中不能包含空格。您所拥有的有两类： div有两个类别：North和所有此类。我假设您想和一个班级一起工作。因此，以下是您的修改后的代码。我认为这可能会有所帮助。

$(document).ready(function() {
            $( ".container" ).hide();

            $(".all").click(function(){               
                $( ".container" ).show();
                $( ".northall" ).show();
                $( ".eastall" ).show();
                $( ".southall" ).show();
                $( ".westall" ).show();
            });
            $(".north").click(function(){               
                $( ".northall" ).show();
                $( ".container" ).show();
                
                $( ".eastall" ).hide();
                $( ".southall" ).hide();
                $( ".westall" ).hide();
            });
            $(".east").click(function(){                
                $( ".eastall" ).show();
                $( ".container" ).show();
                
                $( ".southall" ).hide();
                $( ".westall" ).hide();
                $( ".northall" ).hide();
            });
            $(".south").click(function(){                
                $( ".southall" ).show();
                $( ".container" ).show();

                $( ".eastall" ).hide();
                $( ".westall" ).hide();
                $( ".northall" ).hide();
            });
            $(".west").click(function(){               
                $( ".westall" ).show();
                $( ".container" ).show();

                $( ".eastall" ).hide();
                $( ".southall" ).hide();
                $( ".northall" ).hide();
            });            
        });

<!DOCTYPE html>
<html>
<head>
    <title>Stack overflow </title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
</head>
<body>
    <ul>
        <li class="all"><a href="#">All</a></li>
        <li class="north"><a href="#">North</a></li>
        <li class="east"><a href="#">East</a></li>
        <li class="south"><a href="#">South</a></li>
        <li class="west"><a href="#">West</a></li>
    </ul>

    <div class="container">
        <div><img src="image1" class="northall"></div>
        <div><img src="image2" class="eastall"></div>
        <div><img src="image3" class="southall"></div>
        <div><img src="image4" class="westall"></div>
        <div><img src="image5" class="westall"></div>
        <div><img src="image6" class="northall"></div>
        <div><img src="image7" class="southall"></div>
        <div><img src="image8" class="southall"></div>
    </div>
  </body>
</html>

如何单击<li>并显示所选的类

2 个答案: