如何在AEM Touch UI中使用复选框显示/隐藏对话框字段

如何在AEM Touch UI中使用复选框显示/隐藏对话框字段,aem,aem-touch-ui,Aem,Aem Touch Ui,我对AEM比较陌生,我尝试在复选框单击时隐藏/显示对话框字段。我尝试了一些方法,但未能实现此功能。这只是为了我自己的学习。我怎样才能做到这一点 我尝试过添加js clientlib,并分别向复选框和目标字段中添加一些类和目标,正如其他答案中所建议的那样,但似乎不起作用。请提供帮助。首先,您需要创建一个clientLibs并将类别添加为cq.authoring.dialog.all,请参阅下面的代码: (function($, $document) { $document.on("dialo

我对AEM比较陌生,我尝试在复选框单击时隐藏/显示对话框字段。我尝试了一些方法,但未能实现此功能。这只是为了我自己的学习。我怎样才能做到这一点


我尝试过添加js clientlib,并分别向复选框和目标字段中添加一些类和目标,正如其他答案中所建议的那样,但似乎不起作用。请提供帮助。

首先,您需要创建一个clientLibs并将类别添加为cq.authoring.dialog.all,请参阅下面的代码:

  (function($, $document) {
 $document.on("dialog-ready", function() {
   Coral.commons.ready($document, function () {   
  dispalyOrHideTabs();   
  $(document).on('change', '#showText', function() {

      if($('#showText').attr('checked')){
        show('1');
      }else{
          hide('1');    
      }

 });

 $(document).on('change', '#showTable', function() {

       if($('#showTable').attr('checked')){
          show('2');
      }else{
          hide('2');    
      }

 });    

     function hide(index){
                     var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
                      var tab2 = tab.attr("aria-labelledby");
                      var tab3 = $document.find("[id='"+tab2+"']");
                      tab3.addClass("hide");
     }
     function show(index){
                     var tab = $document.find("[id='compareImgId-"+index+"']").closest(".coral3-Panel");
                      var tab2 = tab.attr("aria-labelledby");
                      var tab3 = $document.find("[id='"+tab2+"']");
                      tab3.removeClass("hide");
     }

     function dispalyOrHideTabs(){
         var editable = Granite.author.DialogFrame.currentDialog.editable;
         if(editable){
        var node = Granite.HTTP.eval(Granite.author.DialogFrame.currentDialog.editable.path + ".json");
         if(node){
            var storedTextValue = node.showText;
             var storedTableValue = node.showTable;

             if(storedTextValue){
                    show('1');
             }else{
                    hide('1');
             }

             if(storedTableValue){
                    show('2');
             }else{
                    hide('2');
             }

         }
     }

     }

    });
     });

  })($, $(document));
将granite:id属性添加为复选框资源类型的showText

下面是将隐藏和显示的对话框选项卡:

添加了js clientlib和granite:id属性和目标id,仍然不起作用。不确定,如果您理解了代码,这是基于coral3的,您必须定义复选框字段的正确id,并且在代码中显示/隐藏对话框的不同选项卡。由于您的要求是在同一选项卡中显示/隐藏另一个字段,因此您可以修改代码以添加和删除“hide”类,并相应地添加或删除“hide”类。请附上代码示例。