如何获取被点击元素的类名并使用相同的类名来操作其他元素？答案

【问题标题】：How to get the class name of the element that was clicked on and use that same class name to manipulate the other elements?如何获取被点击元素的类名并使用相同的类名来操作其他元素？
【发布时间】：2018-09-29 03:28:19
【问题描述】：

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

不起作用并尝试合并的部分是当单击带有href="javascript:animatedcollapse.toggle('AAA')" 的任何<a> 标签时，将箭头向上转换，它将指向该箭头（<a href="javascript:animatedcollapse.toggle('AAA')" class="link AAA"><span class="arrow"></span></a>）使用与标识符相同的类名，然后通过添加类.arrow-up 来操作该类名.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!'); 
});

【问题讨论】：

标签： javascript jquery css css-transforms

【解决方案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');

【讨论】：

我收到此错误Uncaught TypeError: Cannot read property '$divref' of undefined at Object.showhide (animatedcollapse.js:47) at Object.toggle (animatedcollapse.js:35)
似乎与您正在使用的库有关，但打开您的小提琴并更改切换类的行确实有效。
我在本地检查了代码，并且箭头的代码运行了，但是当我单击向下显示更多信息的箭头时，它不会向上转换箭头，它只是保持不变。
我能弄明白。感谢您的努力和亮点。

【解决方案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');
});

【讨论】：