Question

我正在尝试选择下一个元素，以添加通过JQuery进行图像选择的类。

我的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小时后，尝试解决问题，阅读文档，我比开始时更加困惑...

我在做什么错了？

Answer 1

一种方法是，您需要退出parent div，然后对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>

Answer 2

JQuery的next方法选择所选元素的下一个兄弟。但是，由于您的photocallThumb div位于d-inline-block div中，因此没有兄弟姐妹。您必须返回一个级别，然后找到下一个photocallThumb，也许像selected.parent().find('.photocallThumb').eq(0)之类的东西。

但是，可以帮助您避免此类错误的更好模式称为模板化。基本上，在客户端，您有一个html模板字符串，并将其表示当前状态的数据传递给它。就您而言，您需要向其传递一组javascript对象，每个对象都有一个图片网址和一个isSelected布尔值。然后，当状态更改时，您无需重新使用jquery来解决已更改的内容，而只需重新渲染模板并将html元素的内容替换为新渲染的模板，它便神奇地处于正确的状态。这是诸如React和Angular之类的大型框架所偏爱的模式。

下面是lodash的一个示例，该示例呈现了用户名列表：

// Use the "evaluate" delimiter to execute JavaScript and generate HTML.
var compiled = _.template(
    `<% _.forEach(users, function(user) { %>
        <li><%- user %></li>
     <% }); %>`);
compiled({ 'users': ['fred', 'barney'] });
// => '<li>fred</li><li>barney</li>'

尝试在JQuery

2 个答案: