Блог

Главная - Вопросы по программированию - Почему мой скрипт jQuery нельзя использовать на двух div?

Почему мой скрипт jQuery нельзя использовать на двух div?

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Итак, на моем веб-сайте есть jQuery для отображения / скрытия div, когда я нажимаю на предыдущий и следующий логотип. Он отлично работает на первом div, но когда я хочу применить его ко второму div с тем же классом, это не сработало.

 function updateItems(delta) {

  var $items = $('.group').children();
  var $current = $items.filter('.current');
  $current = $current.length ? $current : $items.first();
  var index = $current.index()   delta;

  // Range check the new index
  index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
  $current.removeClass('current');
  $current = $items.eq(index).addClass('current');

  // Hide/show the next/prev
  //$(".prev").toggle(!$current.is($items.first()));    
  //$(".next").toggle(!$current.is($items.last()));   
}

$(".next").click(function() {
  updateItems(1);
});

$(".prev").click(function() {
  updateItems(-1);
});

// Cause initial selection
updateItems(0); 
 .group div {
  display: none;
}

.group div.current {
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 20px;
  display: block;
  border: 3px solid #caa461;
}

.next,
.prev {
  float: right;
  font-size: 2vw;
  padding-top: 10px;
  width: 90px;
  height: 35px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-lg-8 text-justify reveal group">
  <div>
    <p>First Div</p>
  </div>

  <i class="fas fa-angle-right" id="next"></i>
  <i class="fas fa-angle-left" id="prev"></i>
</div>

<div class="col-lg-8 text-justify reveal group">
  <div>
    <p>Second Div</p>
  </div>

  <i class="fas fa-angle-right next"></i>
  <i class="fas fa-angle-left prev"></i>
</div>

Ответ №1:

Попробуйте что-то вроде этого

Стрелки не знают, кому они принадлежат

У вас не было класса next / prev для второго набора стрелок

 function updateItems(tgtDiv, delta) {

  var $items = $(tgtDiv).children();
  var $current = $items.filter('.current');
  $current = $current.length ? $current : $items.first();
  var index = $current.index()   delta;

  // Range check the new index
  index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index);
  $current.removeClass('current');
  $current = $items.eq(index).addClass('current');

}

$(".next").click(function(e) {
  updateItems(e.target.closest("div"), 1);
});

$(".prev").click(function(e) {
  updateItems(e.target.closest("div"), -1);
});

// Cause initial selection
$(".group").each(function() {
  updateItems(this, 0)
}) 
 .group div {
  display: none;
}

.group div.current {
  padding-top: 20px;
  padding-left: 25px;
  padding-right: 20px;
  display: block;
  border: 3px solid #caa461;
}

.next,
.prev {
  float: right;
  font-size: 2vw;
  padding-top: 10px;
  width: 90px;
  height: 35px;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90 nuLcSKlbmrPcLa0OT92xO1BIsZ ywDWZCvqsWgccV3gFoRBv0z 8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="col-lg-8 text-justify reveal group">
  <div>
    <p>First Div</p>
  </div>

  <i class="fas fa-angle-right next"></i>
  <i class="fas fa-angle-left prev"></i>
</div>
<hr/>
<div class="col-lg-8 text-justify reveal group">
  <div>
    <p>Second Div</p>
  </div>

  <i class="fas fa-angle-right next"></i>
  <i class="fas fa-angle-left prev"></i>
</div>

Комментарии:

1. Здравствуйте, спасибо за ваш ответ, код действительно работал, но при первой загрузке сайта div 2 не был показан. Я должен нажать next и переместить его обратно, чтобы показать div. Можете ли вы помочь мне это исправить? и еще один, я продолжаю получать пустой div в and, я думаю, это потому, что следующий и предыдущий <i> тег определяются как div. Можете ли вы помочь мне избавиться и от этого? Спасибо перед

2. $(".group").each(function() { updateItems(this,0) });

3. Большое вам спасибо, как насчет пустого div в конце, я это потому, что следующий и предыдущий тег <i> определяются как div. Можете ли вы помочь мне избавиться и от этого? Спасибо перед

4. Почему они должны рассматриваться как div?

5. Я изменил идентификатор на класс next / prev на стрелках