尝试在JQuery中选择下一个项目时遇到问题

Question

我正在尝试选择下一个元素，以添加使用JQuery通过image-radio选择的类。

我的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

jQuery的next方法选择所选元素的下一个同级。但是，由于您的photocallThumbdiv位于d-inline-blockdiv内，因此没有兄弟姐妹。您必须返回一个级别，然后找到下一个级别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(&nbsp; &nbsp; `<% _.forEach(users, function(user) { %>&nbsp; &nbsp; &nbsp; &nbsp; <li><%- user %></li>&nbsp; &nbsp; &nbsp;<% }); %>`);compiled({ 'users': ['fred', 'barney'] });// => '<li>fred</li><li>barney</li>'