Question

我正在制作一个用户插入成分的成分应用

我的应用程序如下所示： enter image description here

正如您所看到的，第一个成分跨度最后没有 X ，因为您必须至少有一种成分，但剩余的成分跨度。我也在使用Jquery Sortable Plugin所以如果您点击任何成分跨度的外部附近，您可以更改成分的顺序。这样可以正常工作，除非你移动第一个成分跨度，那么该跨度最后没有 X ，即使你将它移动到最后一个位置。

所以我要做的是让第一个成分跨度始终没有 X ，即使换成另一个成分跨度的顺序。我试过这个：

$('ingredientsCOUNT > span:first').hide(deleteButton);

但它不起作用？还有其他建议吗？非常感谢所有帮助，这是我的代码：

HTML（可以忽略php！）

<div class='formelementcontainer funky'>
        <label for="ingredient">Ingredients</label>
        <div id='ingredientsCOUNT' class='sortable'>
            <span>
                <input type="text" class='small' name="ingredient" id="ingredient" placeholder='QTY'/>
                <select name='measurements'>
                    <option value='' name='' checked='checked'>--</option>
                    <?foreach ($measurements as $m):?>
                        <option value='<?=$m->id;?>'><?=$m->measurement;?></option>
                    <?endforeach;?>
                </select>
                <input type="text" name="ingredient" id="ingredient" placeholder='Ingredient'/>
            </span>
        </div>
        <div class="clear"></div>
        <div class='addSPAN tabover'>
            <a class='float-right' id='btnAddIngredients' href='#'>Add Ingredient</a>
        </div>
</div>

的jQuery

(function($) { 
$(document).ready(function () {
    $('#btnAddIngredients').click(function () {
        var num = $('#ingredientsCOUNT span').length;
        var newNum = new Number(num + 1);
        var deleteButton = $("<a class='float-right' style='margin:10px 2px;' href='#'><img src='<? echo base_url()."public/img/delete.png";?>' height='11' width='11' /></a>");
        deleteButton.click(deleteThis);
        $('#ingredientsCOUNT > span:first')
            .clone()
            .attr('name', 'ingredient' + newNum)
            .append(deleteButton)
            .appendTo('#ingredientsCOUNT')
            .fadeIn();
        $('ingredientsCOUNT > span:first').hide(deleteButton); //THIS IS MY SOLUTION THAT DIDN'T WORK
    });
    function deleteThis() {
        var span = $(this).closest('span')
        span.fadeOut('slow', function() { span.remove(); });
    }
    $( ".sortable" ).sortable();       //jQuery Sortable initialized
});

})(jQuery);

Answer 1

用CSS隐藏它怎么样？以下假设您在删除链接中添加了一个类delete-button：

#ingredientsCOUNT > span:first-child .delete-button { display: none; }

使用该CSS，您可以重新排序列表，添加或删除项目，并且第一个删除按钮将永远不会显示。

Answer 2

由于:first-child在oldIE（https://developer.mozilla.org/en-US/docs/CSS/:first-child#Internet_Explorer_notes）中很古怪，因此可以像这样使用Sortable API：

$(".sortable").sortable({
    update: function (event, ui) {
        var rows = $("#ingredientsCOUNT").children("span");
        rows.removeClass("first-child");
        rows.first().addClass("first-child");
    }
});

（可能有更好的方法来使用event和/或ui参数）

这样，您就不必确定要添加删除按钮的行;您将始终在HTML的每一行中都包含一个删除按钮。然后，当排序完成后，stop事件中的jQuery（编辑： update事件）将隐藏第一行的删除按钮并显示其余部分（通过类）

当然，你需要这个CSS：

#ingredientsCOUNT > span.first-child a.delete-button {
    display: none;
}

并在删除按钮delete-button

中添加<a>课程

修改

我将Sortable方法从stop更改为update，以便在排序完成后排序安排实际发生变化时只运行代码。

Make First Ingredient永远不会被删除

2 个答案: