AEM onclick 标记实施答案

【问题标题】：AEM onclick tag implementationAEM onclick 标记实施
【发布时间】：2018-08-28 01:49:18
【问题描述】：

尝试在 AEM 中为多个按钮组件实现 onclick 标记加载需要关于最佳实践的建议。以下是我实施的方法。有人可以帮我解决这个问题。提前致谢！

<sly data-sly-test="${properties.tag}">
    <script>
        $(".input1-tag").click(function(e){
            e.preventDefault();
            var href = $(this).attr("href");
            $("body").append("<img src=\" ${properties.tag @ context ='scriptString'} \" width="1" height="1" alt="" />");
            window.location = href;
        });
    </script>
</sly>

<sly data-sly-test="${properties.optionaltag}">
   <script>
     $(".input2-tag").click(function(e){
        e.preventDefault();
        var href = $(this).attr("href");
        $("body").append("<img src=\" ${properties.optionaltag @ context ='scriptString'} \" width="1" height="1" alt="" />");
        window.location = href;
      });
   </script>
</sly>

<sly data-sly-test="${properties.thirdtag}">
   <script>
      $(".input3-tag").click(function(e){
        e.preventDefault();
        var href = $(this).attr("href");
        $("body").append("<img src=\" ${properties.thirdtag @ context ='scriptString'} \" width="1" height="1" alt="" />");
        window.location = href;
     });
   </script>
</sly>

【问题讨论】：

您能否澄清implement onclick tag load for multiple button 部分？你想通过这些点击功能来实现什么？这是特别创作 UI 还是您的应用程序？
@ImranSaeed 这适用于应用程序，在用户点击通过 img 源将他们带到目标页面之前将加载一个双击跟踪 url。这里我有 3 个按钮，所以将从用户那里获取三个双击 url 并在点击时加载它。

标签： javascript jquery aem sightly aem-6

【解决方案1】：

看起来更像是代码审查请求 - Apt for https://codereview.stackexchange.com/

不过既然有你在，我可以想到以下——

将脚本代码移动到clientlibs 中的.js 文件中。 sightly 或 HTL 的主要目的是美化 HTML 标记并将表示和逻辑问题分开。
使用 sling 模型检索属性值。
在<body> 部分中有一个占位符标记并将其附加到它而不是直接附加到<body> 标记，这样您就可以更好地控制以后将元素定位到不同的位置。
如果您预见到输入标签会有更多事件，请使用事件侦听器而不是内联事件。事件侦听器与点击 - 更多信息here。
由于您在附加<img> 标签时所做的只是修改src 属性，您可能已经在标记中烘焙了<img> 标签，最初可能隐藏并使用attr() 函数来设置@ 987654333@ 属性。

【讨论】：