5

我正在制作一个成分应用程序，用户可以在其中插入成分

我的应用程序如下所示：在此处输入图像描述

如您所见，第一个成分跨度的末尾没有X，因为您必须至少有一个成分，但其​​余的成分跨度有。我还在使用Jquery 可排序插件，因此如果您在任何成分跨度的外部附近单击，您可以更改成分的顺序。这很好用，除非您移动第一个成分跨度，然后该跨度的末尾没有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);
4

2 回答 2

5

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

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

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

于 2013-03-25T21:26:30.930 回答
2

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

$(".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以便它仅在排序安排实际更改时运行代码，在排序完成后。

于 2013-03-25T21:41:35.807 回答