Как я могу показывать контент при наведении на них по идентификатору? - PullRequest
Новая
       23

Как я могу показывать контент при наведении на них по идентификатору?

0 голосов
/ 26 июня 2018

Мне нужно показать содержимое другого списка товаров со своим идентификатором.

Это мой код .. 

$(document).ready(function() {
  $(".gift").hide();
  $(".box").hover(function() {
    var id = this.id;
    $(".gift").show();
  }, function() {
    $(".gift").hide();
  });
});
.box {
  float: left;
  margin: 10px;
  width: 140px;
  height: 20px;
  background: lightblue;
}

.gift {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="producto_1" class="box">
  <div class="gift">
    PRODUCTO 1
  </div>
</div>
<div id="producto_2" class="box">
  <div class="gift">
    PRODUCTO 2
  </div>
</div>
<div id="producto_3" class="box">
  <div class="gift">
    PRODUCTO 3
  </div>
</div>

и JSFIDDLE

Я могу получить идентификатор при наведении курсора на каждое поле и сохранить его в var = id, но я не уверен, как заставить функцию show работать с этим идентификатором.

1 Ответ

0 голосов
/ 26 июня 2018

Для этого вам вообще не нужен JS, используйте селектор CSS :hover, например: 

.box {
  float: left;
  margin: 10px;
  width: 140px;
  height: 20px;
  background: lightblue;
}

.gift {
  text-align: center;
  display: none;
}

.box:hover .gift {
  display: block;
}
<div class="box">
  <div class="gift">
    PRODUCTO 1
  </div>
</div>
<div class="box">
  <div class="gift">
    PRODUCTO 2
  </div>
</div>
<div class="box">
  <div class="gift">
    PRODUCTO 3
  </div>
</div>

Если вы действительно хотите сделать это в JS, против чего я бы посоветовал, вы можете использовать ключевое слово this для ссылки на элемент, вызвавший событие hover, затем toggle() его дочерний элемент .gift , Каким бы способом вы этого не достигли, атрибуты id не имеют значения, что хорошо, поскольку логика СУХАЯ. 

$('.box').hover(function() {
  $(this).find('.gift').toggle();
});
.box {
  float: left;
  margin: 10px;
  width: 140px;
  height: 20px;
  background: lightblue;
}

.gift {
  text-align: center;
  display: none;
}
<div class="box">
  <div class="gift">
    PRODUCTO 1
  </div>
</div>
<div class="box">
  <div class="gift">
    PRODUCTO 2
  </div>
</div>
<div class="box">
  <div class="gift">
    PRODUCTO 3
  </div>
</div>
...