Question

尝试为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>

Answer 1

查看更多代码检查请求-https://codereview.stackexchange.com/的公寓

但是既然您在这里，我就可以想到以下几点-

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

AEM onclick标记实施

1 个答案: