Question

我有一个jquery应用程序，我正在努力用户基本上点击一个项目，它将项目移动到equipped部分。

我计划如何开展这项工作，当点击一个班级equippable时，jquery会在#weapons下查找data-item值为{{1}的第一个子div并为其指定0的值。

为了让您更好地了解正在发生的事情，这里是jsfiddle。

我原本打算使用每个功能，但这将取代两个可用的设备插槽。我需要能够找到第一个可用的，或者如果没有可用的，发送警报，我不知道如何找到第一个可用的插槽。

建议？

Answer 1

你的意思是THIS?（我警告第一个可用的文本属性）

你需要的选择器是：

$('#weapons [data-item=0]:first')

因此，要设置data属性，您可以执行以下操作：

$(document).ready(function(){
    $(".equippable").click(function() {
        $('#weapons [data-item=0]:first').data("item", $(this).data("item"));
    }); 
});

Answer 2

$(document).ready(function() {
    $(".equippable").click(function() {
        $('#weapons')
              .find('div[data-item="0"]:first') // first div with data-item=0
              .attr('data-item', $(this).data('item')); // chage data-item value
    });
});

<强> DEMO

您也可以

$(document).ready(function() {
    $(".equippable").click(function() {
        $('div[data-item="0"]:first', '#weapons')  // first div with data-item=0
           .attr('data-item', $(this).data('item'))
    });
});

<强> DEMO

Answer 3

我认为最简单的方法是为武器插槽使用额外的类：

<div id="weapons">
    <div class="weapon_slot empty">No Equip</div>
    <div class="weapon_slot empty">No Equip</div>
</div>

然后使用代码首先清空：

$(document).ready(function(){
    $(".equippable").click(function() {
        var empty_slots = $('#weapons div.weapon_slot.empty'),
            first_empty = $(empty_slots).filter(':first');

        if(first_empty.length > 0) {
            $(first_empty).removeClass('empty');
            // and whatever you also need to do here...
        }
        else { /* Place for alert here */ }
    }); 
});

我刚刚更新了你的小提琴（对不起，如果这是一个问题）并且它按原样运行 - 如果你点击第一个元素中的项.empty类消失（所以你将添加的每个代码都将正确执行在第一个空元素上。）

干杯！

Answer 4

$(document).ready(function(){
    $(".equippable").click(function() {
       var $emptySlot = $('#weapons').find('.no_equipment[data-item=0]')[0]; // Get the first empty slot
        $emptySlot.find('.no_equipment[data-item=0]').append(this);
        $emptySlot.data('item') = 1;
    });
});

jquery遍历div并首先“清空”div

4 个答案: