Как закрыть вкладку? (Компонент OctoberCMS, Javascript)

хтм

<div id="tab" name="{{__SELF__.id}}" class="my-tab">
    <img id="tab-avatar" style="height:50px; width:50px" src="{{__SELF__.avatarImage}}">
    <div id="tab-minimize">
        <div id="tab-label"></div>
        <div id="tab-expand" name="{{__SELF__.id}}" class="tab-expand tab-btn"></div>
        <div id="tab-close" name="{{__SELF__.id}}" class="tab-close tab-btn"></div>
    </div>
</div>

JS

$(function(){
    $(".tab-close").each(function(){
        var tabName = $(this).attr('name');
        $(this).click(function(){ 
            $(".my-tab").each(function(){
                $("tabName").addClass("hidden");
            }); 
        });
    });
});

Теперь у меня есть две вкладки (вкладки, которые дублируются), обе имеют одинаковое имя класса, идентификатор и т. д. Единственное отличие состоит в том, что у них есть собственное уникальное имя.

Как закрыть вкладку, когда я нажимаю кнопку закрытия определенной вкладки?

Это означает, что я хочу нажать кнопку закрытия вкладки 1, чтобы закрыть вкладку 1, и нажать кнопку закрытия вкладки 2, чтобы закрыть вкладку 2.


javascript jquery attributes twig octobercms
person BEX    schedule 05.07.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

оба имеют одинаковое имя класса, идентификатор и т. д.

class может быть одинаковым, но id должен быть уникальным.

$(function(){
    $(".tab-btn").on('click',function(event){
        $(this).closest('.my-tab').addClass('hidden')
  })
});
person brk    schedule 05.07.2016
comment
но вкладки дублируются, поэтому у них будет один и тот же идентификатор, но у них есть уникальный идентификатор, который я установил для имени. что означает компонент 1 ‹div id=tab name=uniqueID_1 class=my-tab› ‹img id=tab-avatar style=height:50px; width:50px src={{SELF.avatarImage}}› ‹div id=tab-minimize› ‹div id=tab-label›‹/div› ‹div id=tab-expand name=uniqueID_1 class=tab-expand tab-btn›‹/div› ‹div id=tab-close name=uniqueI_D1 class=tab-close tab-btn›‹/div› ‹/div› ‹/div› и компонент 2 name=uniqueID_2 - person BEX; 05.07.2016
comment
что бы это ни было, идентификатор никогда не может повторяться, имя может повторяться, поскольку имя представляет один и тот же набор элементов. Проверьте сеть разработки Mozilla и ЭТО - person brk; 05.07.2016
comment
хм... Вы знаете о компоненте octobercms и ветке? потому что на самом деле мне сказали использовать twig для установки уникального идентификатора для каждого дублированного компонента, но я знаю только, что мне нужно поместить это в htm {% set uid = '{{SELF.id}}' %} и я не очень уверен, как его использовать. - person BEX; 05.07.2016
comment
поскольку все дублированные компоненты будут точно такими же, единственное отличие состоит в том, что они имеют уникальный идентификатор, поэтому укажите {{SELF.id}}, это помогает указать их собственный уникальный идентификатор. - person BEX; 05.07.2016