Хобрук: Ваш путь к мастерству в программировании

Удалить определенный диапазон в элементе, если есть дочерний элемент - jquery

Я использую вложенную сортировку jQuery (http://mjsarfatti.com/sandbox/nestedSortable/). В списке пользователь может перетаскивать элементы до уровня 3. По сути, у элемента может быть отец и дедушка.

Если у элемента нет дочернего элемента, он добавит элемент span, включающий входной файл. И если элемент является отцом или дедушкой, не может показать элемент входного файла. Итак, когда я перетаскиваю элемент в другой элемент (отец), это работает. Но когда я перетаскиваю элемент внутри ранее удаленного элемента, входной файл не исчезает.

JSFiddle

Я разместил 5 изображений, чтобы лучше понять.

Например: У меня есть этот список

Я заменяю элемент 5 и элемент 7 на элемент 6. Элемент 6 является отцом элементов 5 и 7. Кнопка

Когда я перетаскиваю элемент 5 из элемента 6, файл кнопки исчезает в этом элементе 5.

Когда я перетаскиваю элемент 5 в элемент 7, в элементе 5 появляется файл кнопки (это правильно! Но в элементе 7 файл кнопки не исчезает. На самом деле эта кнопка исчезнет!

И если я перетащу элемент 7 в raiz, кнопка не исчезнет.

Код:

<ol class="sortable">
        <li id="list_1"><div><span class="disclose"><span></span></span>Item 1<span title="Click to delete item." data-id="1" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
            <ol>
                <li id="list_2"><div><span class="disclose"><span></span></span>Sub Item 1.1<span title="Click to delete item." data-id="2" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    <ol>
                        <li id="list_3"><div><span class="disclose"><span></span></span>Sub Item 1.2<span title="Click to delete item." data-id="3" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    </ol>
            </ol>
        <li id="list_4"><div><span class="disclose"><span></span></span>Item 2<span title="Click to delete item." data-id="4" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
        <li id="list_5"><div><span class="disclose"><span></span></span>Item 3<span title="Click to delete item." data-id="5" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
            <ol>
                <li id="list_6" class="mjs-nestedSortable-no-nesting"><div><span class="disclose"><span></span></span>Sub Item 3.1 (no nesting)<span title="Click to delete item." data-id="6" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                <li id="list_7"><div><span class="disclose"><span></span></span>Sub Item 3.2<span title="Click to delete item." data-id="7" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    <ol>
                        <li id="list_8"><div><span class="disclose"><span></span></span>Sub Item 3.2.1<span title="Click to delete item." data-id="8" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
                    </ol>
            </ol>
        <li id="list_9"><div><span class="disclose"><span></span></span>Item 4<span title="Click to delete item." data-id="9" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
        <li id="list_10"><div><span class="disclose"><span></span></span>Item 5<span title="Click to delete item." data-id="10" class="deleteMenu ui-icon ui-icon-closethick">X</span></div>
    </ol>

Javascript:

$('ol.sortable').nestedSortable({
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        opacity: .6,
        placeholder: 'placeholder',
        revert: 250,
        tabSize: 25,
        tolerance: 'pointer',
        toleranceElement: '> div',
        maxLevels: 3,
        isTree: true,
        expandOnHover: 700,
        startCollapsed: true,
        stop: function(event, ui) {
            //get item id
            var id = $(ui.item).attr('id');
            var res = id.substr(5);

            //check the item have child
            if($('#list_'+res).find('ol').length != 0) {
                //The item have child!
                $(this).parent('span.file_upload').remove();
            } else {
                //The item don't have child!
                //check the item have father
                if ($('#list_'+res).parent().is('ol.sortable')) {
                    //The item don't have father
                    $('#list_'+res).find('span.file_upload').remove();
                } else {
                    //The item have father!
                    //avoid multiple button file (only one!)
                    if ($('#list_'+res).find('span.file_upload').length == 0) {
                        //insert the file button
                        $('#list_'+res).append(
                            '<span class="file_upload" title="Click to upload a file." id="res" class="deleteMenu">'
                            + '<input name="upload_file" type="file" class="new_file" />'
                            + '</span>');
                    }
                }
            }
        }

    });
javascript jquery tree
29.05.2017

  • Конечный тег для некоторых элементов <li> в этом случае не является обязательным: list_1, list_2. 30.05.2017
  • @MajidFouladpour, я поставил конечный тег, но проблема не решена. Спасибо 30.05.2017
  • Пробовали ли вы устанавливать точки останова и выполнять код по мере его выполнения? Я бы также добавил console.log(this); над $(this).parent('span.file_upload').remove();, чтобы убедиться, что this — это то, что вы предполагаете. 30.05.2017
  • @MajidFouladpour, в журнале консоли, если у элемента есть дочерний элемент, это печатается: ‹ol class=sortable ui-sortable›. И если у элемента нет дочернего элемента, не печатайте. Какие-либо предложения? 30.05.2017
  • @MajidFouladpour, я добавил $('#list_'+res).parent().find('span.file_upload').remove(); но проблема происходит. 30.05.2017
  • Возможно, вы добавляете вход для загрузки файла в немного другой узел, чем вы предполагаете, он все еще отображается таким образом, что по внешнему виду вы не можете сказать, что он неуместен; затем, пытаясь удалить его, вы смотрите под родителем, который должен был быть добавлен, и ничего не найдено для удаления ... Если бы у вас было это где-то в Интернете, я мог бы исследовать дальше. 30.05.2017
  • @MajidFouladpour, я поместил полный код в JSFiddle для проверки. Спасибо! 30.05.2017
  • @MajidFouladpour, поэтому я проверил в консоли, и команда $(this).parent('span.file_upload').remove() вызывает основной родитель, то есть ol.sortable. Это правильно, это работает, но когда у меня есть бабушка и дедушка, команда также возвращает ol.sortable. На самом деле, должен быть возвращен родитель li этого узла. Вы согласились? 30.05.2017

Ответы:


1

Я предлагаю альтернативный подход. Вместо того, чтобы добавлять/удалять закачки отдельных файлов, каждый раз удаляйте все промежутки загрузки файлов и добавляйте промежутки там, где это необходимо. Я не уверен, что полностью понимаю логику, определяющую, когда мы должны или не должны иметь интервалы загрузки. Поэтому вам нужно изменить это в примере ниже:

HTML

<div class="template" style="display:none">
    <span class="file_upload" class="deleteMenu">
        <input name="upload_file" type="file" class="new_file" />
    </span>
</div>

JS

var $fu_span;

$(document).ready(function(){    
    $fu_span = $("div.template").html();
    $("div.template").remove();
    $('ol.sortable').nestedSortable({
        ...
        stop: mount_file_uploads
    });
});

function mount_file_uploads() {
    var $root = $("body > ol.sortable");
    $root.find("span.file_upload").remove();
    $("li li.mjs-nestedSortable-leaf").append($fu_span);
}

JSFiddle

Обновление В OP описан случай, когда мы ожидаем, что будет добавлен ввод для загрузки файла, но это не так. Изучив код, я понял, что если вы переместите единственный дочерний элемент в другое место, его бывший родитель не получит класс mjs-nestedSortable-leaf, а пустой <ol> все равно останется там.

Плагин не предоставляет никакого метода для обнаружения листовых узлов, поэтому мы используем его внутреннее состояние для их поиска.

Я сообщил об этой проблеме, но, поскольку API отсутствует метод, сопровождающий может не считать это ошибкой.

Во всяком случае, я добавил несколько строк в качестве обходного пути. Вот функция обновления mount_file_uploads:

function mount_file_uploads() {
    var $root = $("body > ol.sortable");
    var $ol;
    $root.find("span.file_upload").remove();
    $root.find("ol").each(function(){
        $ol = $(this);
        if($ol.children().length === 0) {
            $ol.addClass("empty-ol");
            $ol.parent().addClass("mjs-nestedSortable-leaf");
        }
    });
    $("ol.empty-ol").remove();
    $("li li.mjs-nestedSortable-leaf").append($fu_span);
}

Обновлен JSFiddle

30.05.2017
  • очень хороший! Спасибо. Однако, когда я перетаскиваю элемент из родительского элемента, и если у этого родительского элемента нет дочернего элемента и есть родитель, должна появиться кнопка для этого элемента. Ты согласен? 30.05.2017
  • @Marcel Марсель Я сказал, что не совсем понимаю правила о том, где нужны кнопки, и вам нужно адаптировать mount_file_uploads, чтобы он вел себя так, как вы хотите. 31.05.2017
  • в JSFiddle попробуйте перетащить подпункт 3.2.1 и бросить в другое место. Реализовать подпункт 3.2. Не появилась кнопка файла. На самом деле у этого элемента нет дочерних элементов, поэтому должна появиться кнопка файла. Я пытаюсь адаптировать код, но пока не получается. Спасибо!!! 31.05.2017
  • @Marcel Кажется, это из-за ошибки. Я только что сообщил об этом здесь: github.com/ilikenwf/nestedSortable/issues/111 31.05.2017
  • Спасибо за поддержку @Majid! Это работает сейчас. Я собираюсь рассказать об этой ошибке в github. Большое спасибо! 31.05.2017
    • Новые материалы
    Управление состоянием в микрофронтендах
    Стратегии бесперебойного сотрудничества Микро-фронтенды — это быстро растущая тенденция в сфере фронтенда, гарантирующая, что удовольствие не ограничивается исключительно бэкэнд-системами..
    Декларативное и функциональное программирование в стиле LINQ с использованием JavaScript с использованием каррирования и генератора ...
    LINQ - одна из лучших функций C #, которая обеспечивает элегантный способ написания кода декларативного и функционального стиля, который легко читать и понимать. Благодаря таким функциям ES6,..
    Структуры данных в C ++ - Часть 1
    Реализация общих структур данных в C ++ C ++ - это расширение языка программирования C, которое поддерживает создание классов, поэтому оно известно как C с классами . Он используется для..
    Как я опубликовал свое первое приложение в App Store в 13 лет
    Как все началось Все началось три года назад летом после моего четвертого класса в начальной школе. Для меня, четвертого класса, лето кажется бесконечным, пока оно не закончится, и мой отец..
    Что в лицо
    Очерк о возвращении физиогномики и о том, почему мы должны это приветствовать. История начинается со странной науки. Р. Тора Бьорнсдоттир, Николас О. Рул. Видимость социального класса по..
    Почему шаблоны проектирования и почему нет?
    Сложность — мать всех проблем в программировании. Программное обеспечение должно быть разработано с точки зрения того, кто его поддерживает, а не того, кто его пишет, потому что программное..
    Создание дизайна обуви с помощью машинного обучения
    Обувь. Что подождать? Я думал, что речь пойдет о машинном обучении! Ну это так. Если бы вы пошли на Amazon, сколько обуви вы бы нашли? Наверное, много, не так ли? Но много ли в них..