Question

我需要有唯一的ID来复制组件我知道如何在我的组件的default.htm中设置唯一ID

{% set uid = '{{__SELF__.id}}' %}

但我不知道如何将其与我的JavaScript相关联... 我已经尝试了几种方法，但我仍然无法做到正确

1）default.htm

<div id="tab" data-id="{{__SELF__.id}}" class="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" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

这是我的js

$(function() {
                    $( "#tab" ).data('id').draggable({ 
                        axis: "y", 
                        containment: "window"
                    });
                  });

出现错误＆＃34; Uncaught TypeError：$（...）。data（...）。draggable不是函数＆＃34;

2）default.htm

<div id="tab{{__SELF__.id}}" class="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" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

这是我的js

$(function() {
                    $( "#tab{{__SELF__.id}}" ).data('id').draggable({ 
                        axis: "y", 
                        containment: "window"
                    });
                  });

3）default.htm

{% set uid = '{{__SELF__.id}}' %}

<div id="tab" class="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" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

这是我的js

var tab_{{uid}} = $(function() {
                    $( "#tab" ).data('id').draggable({ 
                        axis: "y", 
                        containment: "window"
                    });
                  });

window[tab_{{uid}}]();

有人可以告诉我该怎么做吗？

Answer 1

$("#x")返回一个jQuery Objet，其中x为id。
$("#x").data("y")返回jQuery Objet中标记data-y的值，其中x为id。
draggable()无法应用于某个值。

所以尝试这样的事情：

<div id="tab{{__SELF__.id}}" 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" class="tab-btn"></div>
        <div id="tab-close" class="tab-btn"></div>
    </div>
</div>

和

$(function() {
    $(".my-tab").draggable({ 
        axis: "y", 
        containment: "window"
        });
});

您可以使用each()这样的功能：

$(".my-tab").each(function(){
    var myId = $(this).attr('id');
    // Do Something with your unique Id
    $(this).draggable({ 
            axis: "y", 
            containment: "window"
    });
});

Octobercms组件唯一ID（Twig＆amp; Javascript）

1 个答案: