Блог

Главная - Вопросы по программированию - Показывать изображения по порядку, если элемент имеет активный класс

Показывать изображения по порядку, если элемент имеет активный класс

#javascript #html #jquery #css #wordpress

#javascript #HTML #jquery #css #wordpress

Вопрос:

 $(function() {
    $('.item').click(function() {
       $('.item').removeClass('active');
       $(this).addClass('active');
    });
    
    if ( $(".item:nth-child(1)").hasClass("active") ) {
    $(".opt-img:nth-child(1)").addClass("show");
    } 
    
    if ( $(".item:nth-child(2)").hasClass("active") ) {
    $(".opt-img:nth-child(2)").addClass("show");
    }
    
    if ( $(".item:nth-child(3)").hasClass("active") ) {
    $(".opt-img:nth-child(3)").addClass("show");
    }
    
    if ( $(".item:nth-child(4)").hasClass("active") ) {
    $(".opt-img:nth-child(4)").addClass("show");
    }
    
    if ( $(".item:nth-child(5)").hasClass("active") ) {
    $(".opt-img:nth-child(5)").addClass("show");
    }
            
});  
 .item{
  width: 20px;
  background: #ccc;
  text-align: center;
  margin-bottom: 10px;  
  cursor: pointer;
}
.opt-img {
  display: none;
}
.show{
  display: block;
}
.active{
  color: red;
}  
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="row">
  <div class="col-sm-6">
      <div class="operator-acc">
          <div class="item active">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
      </div>
  </div>
  
  <div class="col-sm-6">
      <div class="opt-imgs">
          <div class="opt-img"><img src="https://via.placeholder.com/300/00f/fff.png"></div>
          <div class="opt-img"><img src="https://via.placeholder.com/300/04f/fff.png"></div>
          <div class="opt-img"><img src="https://via.placeholder.com/300/40f/fff.png"></div>
          <div class="opt-img"><img src="https://via.placeholder.com/300/00e/fff.png"></div>
          <div class="opt-img"><img src="https://via.placeholder.com/300/09f/fff.png"></div>
      </div>
  </div>
</div>

Если класс first .item имеет класс .active, добавьте .показать класс первому .opt-img-классу. Если класс second .item имеет класс .acive, добавьте .показывать для второго класса .opt-img, а также для третьего, четвертого и пятого элемента.

На данный момент это работает только для первого элемента. И не работает для других элементов.

Ответ №1:

В этом примере я использую eq() метод для определения индекса индекса изображения и index() метод для определения индекса нажатой кнопки, что делает логический код коротким.

 $(function() {
    $('.item').click(function() {
       $('.item').removeClass('active');
       $(this).addClass('active');
       
       $('.opt-img').removeClass('show');
       $('.opt-img').eq($(this).index()).addClass('show');
    });           
});  
 .item{
  width: 20px;
  background: #ccc;
  text-align: center;
  margin-bottom: 10px;  
  cursor: pointer;
}
.opt-img {
  display: none;
}
.show{
  display: block;
}
.active{
  color: red;
}  
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="row">
  <div class="col-sm-6">
      <div class="operator-acc">
          <div class="item active">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
      </div>
  </div>
  
  <div class="col-sm-6">
      <div class="opt-imgs">
          <div class="opt-img show"><img src="https://via.placeholder.com/300/00f/fff.png"></div>
          <div class="opt-img"><img src="https://via.placeholder.com/300/04f/fff.png"></div>
          <div class="opt-img"><img src="https://via.placeholder.com/300/40f/fff.png"></div>
          <div class="opt-img"><img src="https://via.placeholder.com/300/00e/fff.png"></div>
          <div class="opt-img"><img src="https://via.placeholder.com/300/09f/fff.png"></div>
      </div>
  </div>
</div>

Ответ №2:

Возможно, это неправильно, но функция click также должна содержать все операторы if, иначе она будет работать только при загрузке страницы следующим образом:

 $(function() {
    $('.item').click(function() {
       $('.item').removeClass('active');
       $(this).addClass('active');
       checkActives();
    });
    function checkActives(){
      if ( $(".item:nth-child(1)").hasClass("active") ) {
        $(".opt-img:nth-child(1)").addClass("show");
      } 
    
      if ( $(".item:nth-child(2)").hasClass("active") ) {
        $(".opt-img:nth-child(2)").addClass("show");
      }
    
      if ( $(".item:nth-child(3)").hasClass("active") ) {
        $(".opt-img:nth-child(3)").addClass("show");
      }
    
      if ( $(".item:nth-child(4)").hasClass("active") ) {
        $(".opt-img:nth-child(4)").addClass("show");
      }
    
      if ( $(".item:nth-child(5)").hasClass("active") ) {
        $(".opt-img:nth-child(5)").addClass("show");
      }
    }
    checkActives();
});

Ответ №3:

Я просто исправлю ваш код (без его оптимизации), просто чтобы показать ошибку.

Взгляните на свой код здесь:

     $('.item').click(function() {
       $('.item').removeClass('active');
       $(this).addClass('active');
    }); // <-------------- this must be moved to the end of you `$(function() {...})`

Итак, пример приведен ниже. Некоторые примечания: Я добавил немного CSS только для украшения (под словом TEST , вы можете удалить его):

 $(function() {
  $('.item').click(function() {
    $('.item').removeClass('active');
    $(".opt-img").removeClass('show');
    
    $(this).addClass('active');

    if ($(".item:nth-child(1)").hasClass("active")) {
      $(".opt-img:nth-child(1)").addClass("show");
    }

    if ($(".item:nth-child(2)").hasClass("active")) {
      $(".opt-img:nth-child(2)").addClass("show");
    }

    if ($(".item:nth-child(3)").hasClass("active")) {
      $(".opt-img:nth-child(3)").addClass("show");
    }

    if ($(".item:nth-child(4)").hasClass("active")) {
      $(".opt-img:nth-child(4)").addClass("show");
    }

    if ($(".item:nth-child(5)").hasClass("active")) {
      $(".opt-img:nth-child(5)").addClass("show");
    }
  });

});  
 .item {
  width: 20px;
  background: #ccc;
  text-align: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.opt-img {
  display: none;
}

.show {
  display: block;
}

.active {
  color: red;
}


/*TEST*/

.operator-acc {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}  
 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>

<div class="row">
  <div class="col-sm-6">
    <div class="operator-acc">
      <div class="item active">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </div>

  <div class="col-sm-6">
    <div class="opt-imgs">
      <div class="opt-img show"><img src="https://via.placeholder.com/300/00f/fff.png"></div>
      <div class="opt-img"><img src="https://via.placeholder.com/300/04f/fff.png"></div>
      <div class="opt-img"><img src="https://via.placeholder.com/300/40f/fff.png"></div>
      <div class="opt-img"><img src="https://via.placeholder.com/300/00e/fff.png"></div>
      <div class="opt-img"><img src="https://via.placeholder.com/300/09f/fff.png"></div>
    </div>
  </div>
</div>