5

ユーザーが材料を挿入する材料アプリケーションを作成しています

私のアプリケーションは次のようになります。ここに画像の説明を入力してください

ご覧のとおり、最初の材料スパンには、少なくとも1つの材料が必要なため、最後にXがありませんが、残りの材料スパンにはあります。私もJquerySortablePluginを使用しているので、いずれかの材料スパンの外側近くをクリックすると、材料の順序を変更できます。これは問題なく機能しますが、最初の材料スパンを移動した場合、最後のスポットに移動しても、そのスパンの最後に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-childoldIE（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イベント（EDIT： update event）のjQueryは、最初の行の削除ボタンを非表示にし、残りを（クラスを介して）表示します。

もちろん、次のCSSが必要になります。

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

delete-button削除ボタンにクラスを追加するには<a>

編集：

Sortableメソッドをからstopに変更しupdateて、並べ替えが完了した後、並べ替えの配置が実際に変更されたときにのみコードが実行されるようにしました。

于 2013-03-25T21:41:35.807 に答える