Как избежать повторения большого количества кода и применять одно правило к нескольким классам - PullRequest
Новая
       1

Как избежать повторения большого количества кода и применять одно правило к нескольким классам

1 голос
/ 19 января 2020

У меня есть 12 изображений, например, и по щелчку изображения я хочу скрыть 11 других изображений и увеличить кликнутое изображение до полного экрана

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

$('.image_one').click(function() {
    $('.image_one').addClass('increase_size');
    $('.image_two').hide(); ...etc for the other 11 images
});

x 12 для всех изображений

Мои знания jQuery и Javascript разумны начинающий, поэтому я надеялся, что кто-то может предложить что-то, чтобы упростить это для того, чего я пытаюсь достичь

Не прося кого-то написать этот код для меня, просто укажите мне общее направление

Ответы [ 4 ]

3 голосов
/ 19 января 2020

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

$(document).ready(function() {

  // User clicks on one of the images
  $(".image").click(function() {
    // Hide all the images
    $(".image").hide();

    // Show the image that the user clicks on
    $(this).show();

    // Add the class to the image the user clicks on
    $(this).addClass("increase_size");
  });

});
.increase_size{
    /* your styles */
}

/* Styles to make the image look like box, you won't need this */

img {
  width: 100px;
  height: 100px;
}


/* note, the id's are just to add backgorund to each color, don't need this either. */

#image1 {
  background-color: red;
}

#image2 {
  background-color: green;
}

#image3 {
  background-color: black;
}

#image4 {
  background-color: grey;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Test Webpage</title>
</head>

<body>
  <img src="image1.jpg" class="image" id="image1">
  <img src="image2.jpg" class="image" id="image2">
  <img src="image3.jpg" class="image" id="image3">
  <img src="image4.jpg" class="image" id="image4">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>
Понимаете ... Просто. Надеюсь это поможет. Удачного кодирования:)
2 голосов
/ 20 января 2020

Как правило, следующие процедуры должны быть каким-то образом реализованы:

  • Найти общего предка всех <img> и затем делегировать ему событие. 

    $('.list').on("click",...

  • Назначьте this (он же event.target) в качестве элемента, на который пользователь щелкнул или навесил, и т. Д. c и назначьте обработчик события (он же функция обратного вызова) 

    $('.list').on("click", 'img', zoomIt)

  • Функция обратного вызова должна иметь возможность обрабатывать объект события, так что this всегда будет выбранным элементом. При этом «состояние» выбранного элемента может быть изменено, а остальные элементы могут быть безопасно исключены. 

    $('.list img').not(this).removeClass('on');
$(this).toggleClass('on');

Передавая события элементу-предку, вам никогда не понадобится беспокоиться о количестве элементов, которые у вас есть в настоящее время или даже в будущем (если какие-либо новые целевые элементы будут добавлены динамически после загрузки страницы). Элемент, по которому щелкнули, - ваша единственная задача (он же event.target, он же this).

Демо

Более подробная информация прокомментирована в демо

ПРИМЕЧАНИЕ: Следующий фрагмент не работает из-за мер безопасности SO. Для демонстрации работы ознакомьтесь с FIDDLE 

/*
Delegate the "click" event to <ul> with .on() jQuery method

The first parameter ['click'] -- is the event 
(aka event.type) which the ancestor element 
(aka event.currentTarget) listens for

The second parameter ['img'] -- (aka event.data) determines "this" , basically the element the user clicked
(aka event.target)

The third parameter [zoomIt] -- (aka Event Handler or callback) will be invoked when the event is triggered
*/
$(function() {
  $('.list').on('click', 'img', zoomIt);
});

/*
Find all <img> within <ul> and remove the .on class with the exception of the clicked <img>

If the clicked <img> doesn't have class .on then add it, otherwise remove it

Finally if the clicked <img> ends up with .on class -- fullscreen it. 
Otherwise remove fullscreen
*/
function zoomIt(event) {
  $('.list img').not(this).removeClass('on');
  $(this).toggleClass('on');

  if ($(this).hasClass('on')) {
    if (this.requestFullscreen) {
      this.requestFullscreen();
    } else if (this.mozRequestFullScreen) {
      this.mozRequestFullScreen();
    } else if (this.webkitRequestFullscreen) {
      this.webkitRequestFullscreen();
    } else if (clicked.msRequestFullscreen) {
      this.msRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  }
  return false;
}
:root {
  font: 400 3vw/1.5 Verdana;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

main {
  width: 90vw;
  height: auto;
  margin: 15vh auto;
  overflow: hidden;
}

.list {
  display: flex;
  flex-flow: row nowrap;
  padding: 0;
  overflow-x: scroll;
  overflow-y: hidden;
}

li {
  list-style: none;
  width: 30vw;
  height: auto;
  margin: 0;
  padding: 0;
}

li img {
  width: 30vw;
  height: auto;
  object-fit: contain;
  cursor: pointer;
}
<main>
  <ul class='list'>
    <li><img src='https://i.ibb.co/hZj77BZ/lena01.jpg'></li>
    <li><img src='https://i.ibb.co/7XxsBr5/lena02.png'></li>
    <li><img src='https://i.ibb.co/X7SCb3w/lena03.png'></li>
    <li><img src='https://i.ibb.co/hZj77BZ/lena01.jpg'></li>
    <li><img src='https://i.ibb.co/7XxsBr5/lena02.png'></li>
    <li><img src='https://i.ibb.co/X7SCb3w/lena03.png'></li>
    <li><img src='https://i.ibb.co/hZj77BZ/lena01.jpg'></li>
    <li><img src='https://i.ibb.co/7XxsBr5/lena02.png'></li>
    <li><img src='https://i.ibb.co/X7SCb3w/lena03.png'></li>
    <li><img src='https://i.ibb.co/hZj77BZ/lena01.jpg'></li>
    <li><img src='https://i.ibb.co/7XxsBr5/lena02.png'></li>
    <li><img src='https://i.ibb.co/X7SCb3w/lena03.png'></li>
  </ul>
</main>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2 голосов
/ 19 января 2020

Вы можете сделать это за 2 шага:

  1. Удалить все увеличения_класса
  2. Добавить все увеличения_класса, кроме кликаемого элемента 

var imageClass = ".image";
var increase_sizeClass = "increase_size";

$(imageClass).on("click", function(){
   // Step 1: Remove all increase_sizeClass
   $(imageClass).removeClass(increase_sizeClass);

   // Step 2: Add all increase_sizeClass except the clicked element
   $(imageClass).not(this).each(function(){
         $(this).addClass(increase_sizeClass);
     });
});
.image{
width: 50px; 
height: 50px;
float:left ;
background-color:red;
}

.image.increase_size{
    font-weight: bold;
    background-color: blue;
    opacity: 0.8;
    /*You can css here as you wish*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="image">Image1</div>
<div class="image">Image2</div>
<div class="image">Image3</div>
<div class="image">Image4</div>
<div class="image">Image5</div>
<div class="image">Image6</div>
<div class="image">Image7</div>
<div class="image">Image8</div>
<div class="image">Image9</div>
<div class="image">Image10</div>
<div class="image">Image11</div>
<div class="image">Image12</div>
0 голосов
/ 19 января 2020

Итак, вы можете попробовать: $("img:not(.image-one)").hide();

РЕДАКТИРОВАТЬ: Было указано, что я должен объяснить это для дальнейшего использования, так что здесь идет.

jQuery позволяет вам использовать большинство CSS селекторов для выбора элементов, поэтому мы можем использовать псевдоселектор :not(), чтобы сделать так, чтобы на определенные элементы не влияло то, что изменяется.

В этом примере мы видим, что все изображения на странице выбраны, затем мы указываем .image-one внутри селектора :not(), исключая его из списка элементов, которые будут скрыты.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...