时间戳

首页 > 解决方案 > 如何获取被点击元素的类名并使用相同的类名来操作其他元素？

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

问题描述

在其 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!'); 
});

标签： javascriptjquerycsscss-transforms

解决方案

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

推荐阅读