Как нажать <li>, и он отображает выбранные классы - PullRequest
Новая
       7

Как нажать <li>, и он отображает выбранные классы

0 голосов
/ 01 октября 2018

С помощью приведенного ниже кода, что требуется, чтобы при нажатии на все, север, восток, юг или запад отображались только изображения, связанные с этими классами 

<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>

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

В именах классов не должно быть пробелов.У вас есть два класса: у Div есть два класса: север и все и т.д. Я предполагаю, что вы хотите работать с одним классом.Итак, ниже ваш модифицированный код.Я думаю, это может помочь. 

$(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>
0 голосов
/ 01 октября 2018 

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>
...