在列表 jquery 中递归添加或删除 class

Question

我有一个可以无限增长的复选框列表，即：

<ul>
<li class="tailor-children">
    <input type="checkbox" class="tailorCheckbox" name="id" id="1_12" value="1_12" checked="">
    <label class="1_12" for="1_12">Animals</label>
    <ul>
        <li>
            <input type="checkbox" class="tailorCheckbox" name="id" id="2_1" value="2_1" checked="">
            <label class="2_1" for="2_1">Mammals</label>
            <ul>
                <li>
                    <input type="checkbox" class="tailorCheckbox" name="id" id="3_1" value="3_1" checked="">
                    <label class="3_1" for="3_1">Carnivores</label>
                </li>
            </ul>
            <ul>
                <li>
                    <input type="checkbox" class="tailorCheckbox" name="id" id="3_2" value="3_2" checked="">
                    <label class="3_2" for="3_2">Rodents</label>
                </li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>
            <input type="checkbox" class="tailorCheckbox" name="id" id="2_2" value="2_2" checked="">
            <label class="2_2" for="2_2">Reptiles</label>
        </li>
    </ul>
</li>

我需要一个动态添加或删除类的函数，无论列表的大小如何，它都能正常工作。我只有一个有效的硬编码解决方案，但它不是递归的，而且一团糟。

tailor.on('change', 'input[type="checkbox"]', function () {
        var checkbox = $(this);
        if (checkbox.prop('checked')) {
            checkbox.parent().find('label').removeClass("removedIcon");
            checkbox.parent().find('label').addClass("removeIcon");
            checkbox.prop('checked', true);
            checkbox.parent().parent().parent().children('label').removeClass("removedIcon");
            checkbox.parent().parent().parent().children('label').addClass("removeIcon");
            checkbox.parent().parent().parent().children('input').prop('checked', true);
            checkbox.parent().parent().parent().parent().parent().children('label').removeClass("removedIcon");
            checkbox.parent().parent().parent().parent().parent().children('label').addClass("removeIcon");
            checkbox.parent().parent().parent().parent().parent().children('input').prop('checked', true);
            checkbox.parent().parent().parent().parent().parent().parent().parent().children('label').removeClass("removedIcon");
            checkbox.parent().parent().parent().parent().parent().parent().parent().children('label').addClass("removeIcon");
            checkbox.parent().parent().parent().parent().parent().parent().parent().children('input').prop('checked', true);
        }
        else {
            checkbox.parent().find('label').removeClass("removeIcon");
            checkbox.parent().find('label').addClass("removedIcon");
            checkbox.parent().find('input').prop('checked', false);
            if (!checkbox.parent().parent().find('label').hasClass("removeIcon") && checkbox.parent().parent().siblings().find('.removeIcon').length == 0) {
                checkbox.parent().parent().parent().children('label').removeClass("removeIcon");
                checkbox.parent().parent().parent().children('label').addClass("removedIcon");
                checkbox.parent().parent().parent().children('input').prop('checked', false);
            }
            if (!checkbox.parent().parent().parent().parent().find('label').hasClass("removeIcon") && checkbox.parent().parent().parent().parent().siblings().find('.removeIcon').length == 0) {
                checkbox.parent().parent().parent().parent().parent().children('label').removeClass("removeIcon");
                checkbox.parent().parent().parent().parent().parent().children('label').addClass("removedIcon");
                checkbox.parent().parent().parent().parent().parent().children('input').prop('checked', false);
            }
            if (!checkbox.parent().parent().parent().parent().parent().parent().find('label').hasClass("removeIcon") && checkbox.parent().parent().parent().parent().parent().parent().siblings().find('.removeIcon').length == 0) {
                checkbox.parent().parent().parent().parent().parent().parent().parent().children('label').removeClass("removeIcon");
                checkbox.parent().parent().parent().parent().parent().parent().parent().children('label').addClass("removedIcon");
                checkbox.parent().parent().parent().parent().parent().parent().parent().children('input').prop('checked', false);
            }
        }
    });

有人可以引导我走正确的道路吗？请帮助我理解如何以递归和有效的方式简化它。

谢谢

Answer 1

不确定您要实现的目标，但我希望这段代码能够实现您的目标

Js fiddle

$(document).on('change', 'input[type="checkbox"]', function () {

        let checkbox = $(this);
        if (checkbox.prop('checked')) {
            checkbox.siblings('label').removeClass("removedIcon");
            checkbox.siblings('label').addClass("removeIcon");

            checkbox.parent('li').parents('li').each(function () {
                $(this).children(':checkbox').prop('checked', true);

                $(this).children(':checkbox').siblings('label').removeClass("removedIcon");
                $(this).children(':checkbox').siblings('label').addClass("removeIcon");
            });

        } else {
            checkbox.siblings('label').removeClass("removeIcon");
            checkbox.siblings('label').addClass("removedIcon");

            checkbox.parent('li').parents('li').each(function () {
                let childrenLength = $(this).children(':checkbox').length;
                if (childrenLength == 0) {
                    $(this).children(':checkbox').prop('checked', false);

                    $(this).children(':checkbox').siblings('label').removeClass("removeIcon");
                    $(this).children(':checkbox').siblings('label').addClass("removedIcon");
                }
            });

            checkbox.siblings('ul').each(function () {
                $(this).find(':checkbox').prop('checked', false);

                $(this).find(':checkbox').siblings('label').removeClass("removeIcon");
                $(this).find(':checkbox').siblings('label').addClass("removedIcon");
            });
        }
    });

在列表 jquery 中递归添加或删除 class

Recursively add or remove class in a list jquery

recursion

jquery

nested

dynamic

nested-loops