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变量，这个变量在这里有uniq Id在你的html代码中。

所以，试试这个:

<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");
 });