Javascript: Как нацелить выбранные элементы в слайд-шоу при наведении курсора на один элемент? - PullRequest
Новая
       15

Javascript: Как нацелить выбранные элементы в слайд-шоу при наведении курсора на один элемент?

1 голос
/ 19 марта 2019

Хорошо, так что я работаю над своим собственным слайд-шоу javascript, которое состоит из карточек. Прямо сейчас я добавляю / перебираю карточки и добавляю EventListener (mouseover и mouseout), чтобы проверить, завис ли пользователь над выбранной карточкой.

Теперь к проблеме. Я должен быть в состоянии предназначаться для всех карт (часть 1, см. Изображение), который идет перед выбранной картой пользователя, а также для всех карт (часть 2, см. Изображение), которая идет после. Но я должен нацелиться на них индивидуально. В основном карты в части 1 получат один вид стилевого оформления, а карты в части 2 - другой. Выбранная карта получит свой собственный стиль.

Image example

Это то, что я имею до сих пор. Если бы кто-то мог указать мне правильное направление, это было бы здорово, спасибо. Я не хочу использовать какие-либо библиотеки, строго javascript. 

var cards = [];
cards = document.querySelectorAll('.card');
for (var i = 0; i < cards.length; i++) {
  cards[i].addEventListener('mouseover', function() {
    //Do something
    console.log('Mouseover: Do something');
  });

  cards[i].addEventListener('mouseout', function() {
    //Do something
    console.log('Mouseout: Do something');
  });
}
.container {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.card {
  display: inline-block;
  background-color: #fff2cc;
  width: 100px;
  height: 150px;
  color: #000;
  text-align: center;
}
<ul class="container">
  <li class="card">Card-1</li>
  <li class="card">Card-2</li>
  <li class="card">Card-3</li>
  <li class="card">Card-4</li>
  <li class="card">Card-5</li>
</ul>

Ответы [ 3 ]

0 голосов
/ 19 марта 2019

Вы можете выбрать конкретную карту и применить имя класса, используя jquery. 

var cards = [];
cards = document.querySelectorAll('.card');
for (var i = 0; i < cards.length; i++) {
  cards[i].addEventListener('mouseover', function() {
    //Do something
    $(this).addClass('selected');
    console.log('Mouseover: Do something');
  });

  cards[i].addEventListener('mouseout', function() {
    //Do something
    $(this).removeClass('selected');
    console.log('Mouseout: Do something');
  });
}
.container {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.card {
  display: inline-block;
  background-color: #fff2cc;
  width: 100px;
  height: 150px;
  color: #000;
  text-align: center;
}

.selected{
  background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="container">
  <li class="card">Card-1</li>
  <li class="card">Card-2</li>
  <li class="card">Card-3</li>
  <li class="card">Card-4</li>
  <li class="card">Card-5</li>
</ul>

Вы даже можете использовать простой CSS, который будет запятым для всей карты.

когда класс карты зависнет, этот css будет выполнен. 

.card:hover{
  background-color: blue;
}
0 голосов
/ 19 марта 2019

Вы можете установить класс для группы / части 1, текущей карты и группы / части 2. отдельно.

Возможно, вы также можете прослушивать фазу всплывающего события вместо регистрации нескольких слушателей.

Чек. 

let ul = document.querySelectorAll('ul')[0];
ul.addEventListener('mouseover', function(e) {  
  
  if(e.target.className.indexOf("card") === -1) { return; }

  let currentFound = false;  
  document.querySelectorAll('.card').forEach(function(card) {
  
    if(card === e.target) { 
      card.classList.add("current-card");
      currentFound = true;
    }
    else
    if(currentFound) {
      card.classList.add("next-cards");
    } 
    else {
       card.classList.add("previous-cards");
    }});
});  


ul.addEventListener('mouseout', function() {
  document.querySelectorAll('.card').forEach(
    function(card) {
      card.classList.remove("previous-cards");
      card.classList.remove("next-cards"); 
      card.classList.remove("current-card");});
  });
.container {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.card {
  display: inline-block;
  background-color: #fff2cc;
  width: 100px;
  height: 150px;
  color: #000;
  text-align: center;
}

.previous-cards {
  background-color: crimson;
}

.next-cards {
  background-color: darkred;
}

.current-card {
  background-color: indianred;
}
<ul class="container">
  <li class="card">Card-1</li>
  <li class="card">Card-2</li>
  <li class="card">Card-3</li>
  <li class="card">Card-4</li>
  <li class="card">Card-5</li>
</ul>

Если вы хотите сохранить цвета до следующего зависания, просто удалите слушатель mouseout и установите его логику в началослушатель при наведении курсора мыши сразу после блока if.

0 голосов
/ 19 марта 2019

Я бы сделал это с помощью CSS и его родственного селектора: 

.card {
    background-color: red;
}

.card:hover ~ .card {
    background-color: green;
}

Если вам нужно использовать JavaScript, используйте [...mouseEnterCard.parentElement.children].indexOf(mouseEnterCard), чтобы получить индекс элемента, а затем зациклите элементы с более низким / более высокиминдекс.

...