Question

我有多个使用相同类的跨度，我试图在用户点击它时向下切换三角形。我的工作方式如下所示。但是当你点击一个三角形切换所有三角形时页面被切换，我如何一次只切换一个类。例如，如果我点击“click me 1”，这是唯一一个应该删除三角形而不是切换所有类的类。

$('body').on('click', '.Toggle', function () {

           
            //$('.triangle').toggleClass("triangle-down");
                 $(this).toggleClass("triangle-down"); //tried

           });

.triangle {
    margin-top: -29px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid red;
    margin-left: 1px;
    display: inline-block;
    transition: .5s ease;
}

.triangle-down {
     transform: rotate(90deg);
    
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Toggle">
<span >
<input type="checkbox " style="display:none">
</span>
<span ><div style="font-size: 11px;" class="triangle" >
</div></span><span style="margin-left:14px;">Click ME 1</span>
<br/>
<span >
<input type="checkbox " style="display:none">
</span>
<span ><div style="font-size: 11px;" class="triangle" >
</div></span><span style="margin-left:14px;">Click ME 2</span>
<br/>
<span >
<input type="checkbox " style="display:none">
</span>
<span ><div style="font-size: 11px;" class="triangle" >
</div></span><span style="margin-left:14px;">Click ME 3</span>
</div>

Answer 1

通过选择$('.triangle')，您将选择具有类三角形的所有元素。

您需要从已单击的元素中获取三角形的引用。在这种情况下，它可以通过

来实现

$('body').on('click', '.Toggle', function (e) {
    // If user can click on triangle element itself
    $(e.target).closest('.triangle').toggleClass("triangle-down");
    // If user has to click on CLICK ME Button
    $(e.target).prev().find('.triangle').toggleClass("triangle-down");
});

如果要在三角形和CLICK ME上单击时更新三角形

$('body').on('click', '.Toggle', function (e) {
    var triangle = $(e.target).closest('.triangle');
    if (!triangle.length) {
        triangle = $(e.target).prev().find('.triangle');
    }
    triangle.toggleClass("triangle-down");
});

PS：我建议你查看jquery文档以获得更好的效果关于closest，prev和find方法做什么以及做什么的想法 e.target

Answer 2

$('body').on('click', '.Toggle', function () {
    $(this).toggleClass("triangle-down");
});

如何在单击时切换单个三角形类

2 个答案: