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