如何获取被单击元素的 class 名称并使用相同的 class 名称来操作其他元素？

Question

在 href 值 href="javascript:animatedcollapse.toggle('ID')" 指定的某些链接上选择时，我有一个 table 下拉菜单。单击时，它将显示描述并使用 animatedcollapse.js 插件按预期工作。

不起作用但我试图合并的部分是在单击带有 href="javascript:animatedcollapse.toggle('AAA')" 的任何 <a> 标签时向上转换箭头，它将指向此具有相同 class 名称的箭头 (<a href="javascript:animatedcollapse.toggle('AAA')" class="link AAA"><span class="arrow"></span></a>) 作为标识符，然后通过添加 class .arrow-up 对其进行转换来操纵 class 名称 .arrow当描述折叠时恢复到默认值 (.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!'); 
});

Answer 1

$(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');

Answer 2

我能够找出转换箭头，下面是工作示例：

$('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');
});

如何获取被单击元素的 class 名称并使用相同的 class 名称来操作其他元素？

How to get the class name of the element that was clicked on and use that same class name to manipulate the other elements?

javascript

css

jquery

css-transforms