0

我有一个下拉菜单，其中有两个选项“图像”和“图标”。

当用户选择“图像”时，我想显示路径浏览器，当他选择“图标”时，我将显示一个文本字段。

这是一个著名的问题，现在我想在上述这些字段位于 Touch UI 的多字段中时执行此操作。

所以说我在这个多字段下有两个项目，当我选择“图像”时，在第一个项目（多字段）中的选择中，OOTB showhide 隐藏了我的“图标”文本字段第一个和第二个项目条目在多字段中也是。

我该如何解决这个问题？

长话短说见博客。我想做这个。只是我的字段在一个多字段中。

注意：我能够使用 ExtJs field.nextSibling() 实现经典 UI 代码，因此我不会影响其他多字段项条目中的条目。

4

1 回答 1

2

找到下面的代码，有关更多详细信息，请在此处查看此gitlink

.content.xml

<enable
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/foundation/form/checkbox"
    text="Enable"
    id="enable"
    value="true"
    name="./enable"
    class="cq-dialog-checkbox-showhide"
    cq-dialog-checkbox-showhide-target=".button-option-enable-showhide-target"/>
<deleteEnable
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/form/hidden"
        name="./enable@Delete"
        value="true"/>
<showHideContainer
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container"
        class="hidden button-option-enable-showhide-target"
        showhidetargetvalue="true">
    <items jcr:primaryType="nt:unstructured">

        <!-- some components to show/hide -->

    </items>
</showHideContainer>

复选框显示隐藏.js

(function(document, $) {
    "use strict";

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
        // if there is already an inital value make sure the according target element becomes visible
        $(".cq-dialog-checkbox-showhide").each( function() {
            showHide($(this));
        });

    });

    $(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {
        showHide($(this));
    });

    function showHide(el){

            // get the selector to find the target elements. its stored as data-.. attribute
            var target = el.data("cqDialogCheckboxShowhideTarget");

            // is checkbox checked?
            var checked = el.prop('checked');

            // get the selected value
            // if checkbox is not checked, we set the value to empty string
            var value = checked ? el.val() : '';

            // make sure all unselected target elements are hidden.
            $(target).not(".hide").addClass("hide");

            // unhide the target element that contains the selected value as data-showhidetargetvalue attribute
            $(target).filter("[data-showhidetargetvalue='" + value + "']").removeClass("hide");

       }

    })(document,Granite.$);
于 2018-04-10T07:02:07.937 回答