尝试在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(

    `<% _.forEach(users, function(user) { %>

        <li><%- user %></li>

     <% }); %>`);

compiled({ 'users': ['fred', 'barney'] });

// => '<li>fred</li><li>barney</li>'