Question

让我尽力解释我在这里做的事情。然后问一下如何解决我最后一篇文章。

我有一个图像列表，当点击时，图像从父元素获取ID并将该id添加到名为orders []的数组中，并在再次单击时从数组中删除id（从显示中添加/删除）订购）。这个部分已经解决，工作正常。

在数组中为每个选定的图像展示显示顺序

这是我没有得到的部分。我希望加载并展示label元素中的显示顺序，用于根据orders []数组的定位选择的每个图像。在添加和删除图像时，此部分需要不断更新。

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

希望它有所帮助！

JQuery inArray显示选择的订单图像

1 个答案: