Question

我有以下代码来控制一次显示一级的单选按钮选项。它从0级开始，在用户选择一个选项后，它确定在下一级可见的选项，并仅显示这些选项。

我的问题是，对于某些选定的选项，下一级别可能没有可用的选项。因此，我想跳过那个级别并检查下一个等等。我能够检查是否存在隐藏和非隐藏元素但是隐藏了父级别导致所有子级元素隐藏起来。

还有其他方法可以检查吗？

在我的代码中，您可以看到以下这一行：

$('*[id^="op' + $(this).val() + '"]').show();

此行将隐藏父项下的选项设置为可见（顺便说一句，我知道在显示父项之前它们不会显示。）之后我会检查是否有可用的选项（即未隐藏）下一级（恰好仍然隐藏）。

在我知道有可用选项之前，我不想显示关卡div。

以下是HTML示例：

<div class="level" id="level0">
                    <div class="option" id="op0-1">
<input id="0-1" name="optionids[1]" type="radio" value="1" />option</div>
                    <div class="option" id="op0-2">
<input id="0-2" name="optionids[1]" type="radio" value="2" />option</div>
</div> 

<div class="level" id="level1">
                    <div class="option" id="op1-3">
<input id="1-3" name="optionids[1]" type="radio" value="3" />option</div>
                    <div class="option" id="op1-4">
<input id="1-4" name="optionids[1]" type="radio" value="4" />option</div>
                    <div class="option" id="op1-5">
<input id="1-5" name="optionids[1]" type="radio" value="5" />option</div>
                    <div class="option" id="op2-6">
<input id="2-6" name="optionids[1]" type="radio" value="6" />option</div>
                    <div class="option" id="op2-7">
<input id="2-7" name="optionids[1]" type="radio" value="7" />option</div>
</div>

<div class="level" id="level2">
                    <div class="option" id="op3-8">
<input id="3-8" name="optionids[1]" type="radio" value="8" />option</div>
                    <div class="option" id="op3-9">
<input id="3-9" name="optionids[1]" type="radio" value="9" />option</div>
                    <div class="option" id="op4-10">
<input id="4-10" name="optionids[1]" type="radio" value="10" />option</div>
                    <div class="option" id="op4-11">
<input id="4-11" name="optionids[1]" type="radio" value="11" />option</div>
                    <div class="option" id="op4-12">
<input id="4-12" name="optionids[1]" type="radio" value="12" />option</div>
</div>

我只展示了三个级别，但这应该足够了。在这种情况下，level0中的所有选项都在level1中有选项，但只有选项（op1-3，op1-4）在level2中有选项。

BTW，ID由选项值和选项父组成。即选项op1-3是选项op0-1和op1-3的实际值。

这是控制选项查看的Jquery。

$(function () {

    $(":submit, :reset").button({ disabled: true });
    $(".option").not($('*[id^="op0-"]')).hide(); //hide all options but those on level 1 (index 0)
    $(".level").not("#level0").hide(); //hides all levels but level 1

    //When user selects an option on visible level show next level and options for selected option
    $("input").click(function () {

        //enable reset button once user starts selection
        if ($("#option:checked")) {
            $("#reset").button({ disabled: false });
        }

        //create variable for easy access to elements
        var parentContainer = $(this).parent();
        var currentLevel = $(this).parent().parent();
        var nextLevel = $(currentLevel).next();

        //disable other options in current level after selection. This will only show selected options at each level
        $(parentContainer).siblings('*[id^="op"]').hide();

        //Set visibility of options related to selected option to on.
        $('*[id^="op' + $(this).val() + '"]').show(); //shows options

        //check if there are options visible for next level. If not move to next level and check. i.e skip any levels which don't have options.
        while (CheckForOptions(nextLevel) == false) {
            nextLevel = nextLevel.next();
        }

        alert("Level after check completed: " + nextLevel.attr("Id") + " This one should become visible");
        //shows the level that now has options for selected option
        $(nextLevel).show();

        //if we are at last level, enable submit button.
        if ($(currentLevel).attr("id") == $("#lastlevel").val()) {
            $(":submit").button({ disabled: false });
        }

    });

    function CheckForOptions(nextLevel) {

        alert("Level coming in: " + nextLevel.attr("Id"));

        if ($(nextLevel).children().not(":hidden").size() > 0) {
            alert("Has some not hidden");
            alert("Number of elements not hidden: " + $(nextLevel).children().not(":hidden").size());
            return true;
        }
        else {
            alert("all are hidden");
            alert("Number of hidden: " + $(nextLevel).children().filter(":hidden").size());
            return false;
        }
    };

Answer 1

好的，虽然识别与特定父母有关的子元素的其中一种方法已经很明显，但它并不是最好的方法。以下是我实施的内容。

function CheckForOptions(nextLevel, val) {

        var result = false;

        $(nextLevel).children().each(function () {
            //check if we find options which are visible in next level. 
            if ($(this).css("display") === "block") {
                result = true; //some visible
            }
        });

        return result;

    };

我之前设置了所有选项，使显示等于“阻止”。这是为了确保在应用Jquery .show（）方法时它返回“阻止”。然后我检查任何级别的孩子是否具有“阻止”的实际值。如果发现了一些我显示的水平，我移动到一个新的水平。

现在，关于我的问题：

如何检查父元素是否隐藏子元素？

你可以查看CSS“display”属性的实际值，即使该元素由于隐藏了父元素而不可见。

如何检查父元素是否未隐藏子元素？

1 个答案: