Как получить имя класса элемента, по которому щелкнули, и использовать то же имя класса для манипулирования другими элементами? - PullRequest
Новая
       9

Как получить имя класса элемента, по которому щелкнули, и использовать то же имя класса для манипулирования другими элементами?

0 голосов
/ 27 сентября 2018

У меня есть выпадающая таблица при выборе определенных ссылок, указанных в значении href href="javascript:animatedcollapse.toggle('ID')".При щелчке он отображает описание и работает, как предполагалось, с помощью плагина animatedcollapse.js.

Часть, которая не работает и я пытаюсь включить, - это преобразование стрелки в направлении вверх, когда любой изЕсли щелкнуть тег <a> с href="javascript:animatedcollapse.toggle('AAA')", он будет указывать на эту стрелку (<a href="javascript:animatedcollapse.toggle('AAA')" class="link AAA"><span class="arrow"></span></a>) с тем же именем класса, что и идентификатор, чтобы затем манипулировать этим именем класса .arrow, добавив класс .arrow-up, чтобы преобразовать его обратно впо умолчанию (.arrow-down), когда описание свернуто.

Вот jsfiddle: https://jsfiddle.net/o2gxgz9r/73382/

HTML: 

<tr>
    <td style="vertical-align:top; width:64px">
        <a class="AAA" href="javascript:animatedcollapse.toggle('AAA')">AAA</a>
    </td>
        <td style="vertical-align:top; width:585px">
        <a class="AAA" href="javascript:animatedcollapse.toggle('AAA')">Heading 1</a>
        <a href="javascript:animatedcollapse.toggle('AAA')" class="link AAA"><span class="arrow"></span></a>

        <p id="AAA" groupname="table-dropdown" speed="400" style="display: none;">DESCRIPTION - Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
    </td>
</tr>

CSS: 

.arrow {
   margin-left: 8px;
   border-right: 5px solid #000;
   border-bottom: 5px solid #000;
   width: 11px;
   height: 11px;
   transform: rotate(45deg);
   transition: .25s transform;
}
.arrow-up {
   transform: rotate(-135deg);
   transition: .25s transform;
}
.arrow-down {
   transform: rotate(0deg);
   transition: .25s transform;
}

JS: 

// transform .arrow when show/hide collapse 
var classID;
$('a[href*="animatedcollapse"]').click(function(){ // detect any href with animatedcollapse clicked
    classID = $(this).attr(class); // get the class name of the elememt that was clicked on
    $(classID).find('.link').children('.arrow').toggleClass('arrow-up'); // find class with .link and toggleClass its children with class name .arrow
    console.log(classID + ' was clicked!'); 
});

Ответы [ 2 ]

0 голосов
/ 28 сентября 2018

Мне удалось выяснить стрелку преобразования, и ниже приведен рабочий пример: 

$('a[href*="animatedcollapse"]').click(function(){ // detect any href with animatedcollapse clicked
    classID = $(this).attr('class'); // get the class name of the elememt that was clicked on
    if(classID.includes('link')) {
        $(this).children('.arrow').toggleClass('arrow-up');
    }
    else $('.' + classID).children('.arrow').toggleClass('arrow-up');
});
0 голосов
/ 27 сентября 2018 
$(document).ready(function(){
   animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    //$: Access to jQuery
    //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    //state: "block" or "none", depending on state
    }
    animatedcollapse.init();

    animatedcollapse.addDiv('AAA', 'fade=0,speed=400,group=table-dropdown,hide=1');
    animatedcollapse.addDiv('BBB', 'fade=0,speed=400,group=table-dropdown,hide=1');
    animatedcollapse.addDiv('CCC', 'fade=0,speed=400,group=table-dropdown,hide=1');

    // transform .arrow when show/hide collapse 
    var classID;
    $('a[href*="animatedcollapse"]').click(function(){ // detect any href with animatedcollapse clicked
        classID = $(this).attr('class'); // get the class name of the elememt that was clicked on
            $('.' + classID).find('.arrow').toggleClass('arrow-up'); // find class with .link and toggleClass its children with class name .arrow
        console.log(classID + ' was clicked!');
    });
});

Эта строка: 

$('.' + classID).find('.arrow').toggleClass('arrow-up');
...