javascript - 尝试在 JQuery 中选择下一项时出现问题

Question

我正在尝试选择下一个元素来添加使用 JQuery 选择的类 image-radio-selected。

我的html就像

<div id="photocall">
 @foreach ($photocalls as $photocall)
   <div class="d-inline-block mx-1">
     <div style="background-image: url('')" class="photocallThumb image-radio-selected"></div>
   </div>
 @endforeach
 <input>
</div>    

我试着：

$( "#mybutton" ).on("click", function() {
  var selected = $('.photocallThumb.image-radio-selected'); // working
  selected.next('.photocallThumb').addClass('image-radio-selected'); // not working
});

2小时后，试图解决，阅读文档，我比开始时更困惑......

我究竟做错了什么？

标签： javascriptjquery

Answer 1

一种方法是您需要离开parentdiv，然后next为parent.

$( "#mybutton" ).on("click", function() {
  var selected = $('.photocallThumb.image-radio-selected');
  selected.parent(".d-inline-block").next(".d-inline-block").find('.photocallThumb').addClass('image-radio-selected'); // not working
});

.image-radio-selected{border:1px solid #ff00aa;}
.mx-1{width:100px;height:100px;border:1px solid #000000;}
.d-inline-block{display:inline-block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="photocall">
 
   <div class="d-inline-block mx-1">
     <div style="background-image: url('')" class="photocallThumb image-radio-selected"></div>
   </div>
   
  <div class="d-inline-block mx-1">
     <div style="background-image: url('')" class="photocallThumb"></div>
   </div>
   
  <div class="d-inline-block mx-1">
     <div style="background-image: url('')" class="photocallThumb"></div>
   </div>
   
  <div class="d-inline-block mx-1">
     <div style="background-image: url('')" class="photocallThumb"></div>
   </div>
 
 <button type="button" id="mybutton">next</button>
</div>