Javascript 变量函数（Twig）

Question

我的default.htm（设置唯一ID）

{ % set uid = __SELF__.id % }

<div id="tab" name="{{uid}}" class="my-tab draggable-tab ui-draggable">
    <img id="tab-avatar" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">
        <div id="tab-label"></div>
        <div id="tab-expand" name="{{uid}}" class="tab-expand tab-btn"></div>
        <div id="tab-close" name="{{uid}}" class="tab-close tab-btn" onclick="tabClose()"></div>
    </div>
</div>

JS

function tabClose(){      
var uid = document.getElementsByName("name");
    $(this).click(function() { 
        $("#tab").addClass("hidden");  //<--- how to put the uid in?
    });
}

JS

var tab_{{uid}} = function tabClose(){
                       $("#tab-close").click(function() {        
                           $("#tab").addClass("hidden");
                       });
                  }

有人可以告诉我如何在 JavaScript 中使用 twig 吗？

如何为每个组件设置唯一的id，这样我复制组件时就不会出现任何错误？

Answer 1

不能在客户端程序(javascript)中调用服务器变量(twig)。

您必须在 html 代码中写入 twig 变量，以便 javascript 捕获它。

比如tout可以放在data属性里

<div id="tab-close" data-uniqid={{uid}} >

在你的 js 中

var uid = $("#tab-close").data('uniqid');

或您的更新

var uid = $("#tab").attr('name');

更新

对于你的问题，我认为你的 js 中不需要 Twig 变量，这个变量在你的 html 代码中有 uniq Id。

所以，试试这个：

<div id="tab{{__SELF__.id}}" class="my-tab draggable-tab ui-draggable">
    <img id="tab-avatar{{__SELF__.id}}" alt="Virtual agent avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize{{__SELF__.id}}">
        <div id="tab-label{{__SELF__.id}}"></div>
        <div id="tab-expand{{__SELF__.id}}" class="tab-expand tab-btn"></div>
        <div id="tab-close{{__SELF__.id}}" class="tab-close tab-btn" onclick="tabClose()"></div>
</div>

在你的 js 中

 $(".tab-close").click(function() {        
     $(this).closest(".my-tab").addClass("hidden");
 });

Javascript 变量函数（Twig）

Javascript Variable Function (Twig)

javascript

jquery

components

uniqueidentifier

twig