当没有选择任何元素时如何在元素之间交替类并返回原始

Posted 2023-05-08

【中文标题】当没有选择任何元素时如何在元素之间交替类并返回原始

【英文标题】：How to alternate class between elements and go back to original when none of elements is selected

【发布时间】：2022-01-14 11:00:40

【问题描述】：

我想请求您的帮助。这就是我想要做的。

我有一个包含六个项目的网格。我想让第一个项目默认处于活动状态，当用户将鼠标移动到五个剩余网格项目之一上时，该类将从第一个项目中删除并应用当前选定的项目。一旦没有光标在它上面的对象。该类将自动再次应用于第一个元素。

const cards = document.querySelectorAll('.card');

function cardSelect() 
  cards.forEach(card => 
    card.addEventListener('mouseenter', () => 
      card.classList.add('active');
    );
    card.addEventListener('mouseleave', () => 
      card.classList.remove('active');
    );

    //If there's no actived element, then apply active class to the first item
    if (!card.classList.contains('active')) 
      cards[0].classList.add('active');
      //If there's any actived element, then remove the active class from the first item
     else 
      cards[0].classList.remove('active');
    
  )

cardSelect();

.grid 
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  grid-template-areas: "item1 item2 item3" "item4 item5 item6";



/* line 1152, ../../PCX/sass/scss/style.scss */

.grid .card 
  color: #fff;
  font-size: 2rem;
  background-color: #0077ff;
  display: flex;
  align-items: center;
  justify-content: center;



/* line 1160, ../../PCX/sass/scss/style.scss */

.grid .card.active 
  background-color: #0000ee;



/* line 1164, ../../PCX/sass/scss/style.scss */

.grid .item1 
  grid-area: item1;



/* line 1167, ../../PCX/sass/scss/style.scss */

.grid .item2 
  grid-area: item2;



/* line 1170, ../../PCX/sass/scss/style.scss */

.grid .item3 
  grid-area: item3;



/* line 1173, ../../PCX/sass/scss/style.scss */

.grid .item4 
  grid-area: item4;



/* line 1176, ../../PCX/sass/scss/style.scss */

.grid .item5 
  grid-area: item5;



/* line 1179, ../../PCX/sass/scss/style.scss */

.grid .item6 
  grid-area: item6;

<div class="grid">
  <div class="item1 card">ITEM 1</div>
  <div class="item2 card">ITEM 2</div>
  <div class="item3 card">ITEM 3</div>
  <div class="item4 card">ITEM 4</div>
  <div class="item5 card">ITEM 5</div>
  <div class="item6 card">ITEM 6</div>
</div>

你们能帮帮我吗？这是一个逻辑问题，缺乏js知识。

【参考方案1】：

我认为，每当光标输入或离开卡片时，您都可以将它们全部清除（我放在一个函数中）。

如果它进入卡片，则将活动类添加到这张卡片。

如果它留下一张卡片，则将活动类别设置为第一张卡片。

const cards = document.querySelectorAll('.card');
cards[0].classList.add('active');

function clearAll() 
  cards.forEach(card => card.classList.remove('active'));


cards.forEach(card => 
    card.addEventListener('mouseenter', () => 
      clearAll();
      card.classList.add('active');
    );
    card.addEventListener('mouseleave', () => 
      clearAll()
      cards[0].classList.add('active');
    );
)

.grid 
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  grid-template-areas: "item1 item2 item3" "item4 item5 item6";



/* line 1152, ../../PCX/sass/scss/style.scss */

.grid .card 
  color: #fff;
  font-size: 2rem;
  background-color: #0077ff;
  display: flex;
  align-items: center;
  justify-content: center;



/* line 1160, ../../PCX/sass/scss/style.scss */

.grid .card.active 
  background-color: #0000ee;



/* line 1164, ../../PCX/sass/scss/style.scss */

.grid .item1 
  grid-area: item1;



/* line 1167, ../../PCX/sass/scss/style.scss */

.grid .item2 
  grid-area: item2;



/* line 1170, ../../PCX/sass/scss/style.scss */

.grid .item3 
  grid-area: item3;



/* line 1173, ../../PCX/sass/scss/style.scss */

.grid .item4 
  grid-area: item4;



/* line 1176, ../../PCX/sass/scss/style.scss */

.grid .item5 
  grid-area: item5;



/* line 1179, ../../PCX/sass/scss/style.scss */

.grid .item6 
  grid-area: item6;

<div class="grid">
  <div class="item1 card">ITEM 1</div>
  <div class="item2 card">ITEM 2</div>
  <div class="item3 card">ITEM 3</div>
  <div class="item4 card">ITEM 4</div>
  <div class="item5 card">ITEM 5</div>
  <div class="item6 card">ITEM 6</div>
</div>

【参考方案2】：

好消息是您不需要 javascript 来执行此操作 - CSS 可以解决问题（请参阅代码注释）

/* no js needed */

.grid 
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  /* 
    You don't need grid areas for this layout :-) 
  */



/* 
  The trick 
  if you are not hovering the grid .grid:not(:hover) 
  then set the active color on .item1.card

  if you are hovering a card .card:hover set the active 
  color on that
  
  when you are hovering a card you are also hovering the 
  grid why the item1.card will turn back to normal...
  unless you hover it – then it uses the .card:hover rule    
 
  I hope it made sense :-)

*/
.grid:not(:hover) .item1.card,
.card:hover 
  background-color: #0000ee;
  


.card 
  color: #fff;
  font-size: 2rem;
  background-color: #0077ff;
  display: flex;
  align-items: center;
  justify-content: center;

<div class="grid">
  <div class="item1 card">ITEM 1</div>
  <div class="item2 card">ITEM 2</div>
  <div class="item3 card">ITEM 3</div>
  <div class="item4 card">ITEM 4</div>
  <div class="item5 card">ITEM 5</div>
  <div class="item6 card">ITEM 6</div>
</div>