JQuery inArray 显示选择图像的顺序

Question

让我尽力解释一下我在这里所做的事情。然后问如何解决这个难题的最后一 block 。

我有一个图像列表，当单击该列表时，图像上的 ID 从父元素中获取，并将该 id 添加到名为 order[] 的数组中，并在再次单击时从数组中删除 id(从显示中添加/删除)命令)。这部分已解决并且工作得很好。

显示数组中每个所选图像的显示顺序

这是我没有得到的部分。我希望加载并展示基于 order[] 数组的定位选择的每个图像的标签元素内的显示顺序。随着图像的添加和删除，这部分需要不断更新。

var orders = []
$('li').click(function () {
    var id = $(this).attr('id');
    if ($(this).hasClass('add')) {
        orders.push(id);
        $(this).removeClass('add');

        //display order by based on positioning in array solution
        $(this).children('label').text($.inArray(id, orders));

    }
    else {
        orders = $.grep(orders, function(value) { return value != id; });
        $(this).addClass('add');
        $(this).children('label').text('');
    }
});

<li id="1" class="add"><img><label></label></li>
<li id="2" class="add"><img><label></label></li>
<li id="3" class="add"><img><label></label></li>
<li id="4" class="add"><img><label></label></li>
<li id="5" class="add"><img><label></label></li>

到目前为止我正在使用 $(this).children('label').text($.inArray(id,orders));这给了我一些非常接近我所看到的东西。它只是有一个小问题，当从列表中删除图像时，所有标签都应该根据更新的数组重置重新对齐。

有什么建议可以让这件事成功吗？

Answer 1

我认为您总是可以从回调内部查找所有元素，但这似乎不太漂亮。也许你可以使用 jQuery 全局事件。

您可以将自定义事件附加到 li 元素，如下所示:

$(li).bind('orderChanged', function(){
    // Do your logic here to set the label with the 'order' array
});

然后在你的点击函数中:

$.event.trigger('orderChanged');

我从来没有需要使用它，并且我不确定它对性能的影响。我从这里得到了这个想法http://devlicio.us/blogs/sergio_pereira/archive/2010/02/21/jquery-custom-element-and-global-events.aspx

希望对你有帮助!