jquery 如何在一个特定的div上使用JavaScript(多个div具有相同的类)

9gm1akwq  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(79)

我有一个JavaScript文件,当点击它时会打开一个div。

let rotation1 = 0;
function rotateImg1() 
{
    rotation1 += 180; // add 90 degrees, you can change this as you want
    if (rotation1 === 360) 
    { 
        // 360 means rotate back to 0
        rotation1 = 0;
    }
    document.querySelector(".exampleboxheadercursoricon1").style.transform = `rotate(${rotation1}deg)`;
}
let transitionIsHappening1 = false;
$(".examplebutton1").click(function() 
{
    if (transitionIsHappening1) return;
    transitionIsHappening1 = true;
    setTimeout(() => transitionIsHappening1 = false, 500);
    $(".exampledropdown").slideToggle(500);
    rotateImg1();
});

字符串
我在同一个类中有多个div。(类是“examplebutton 1”和“examplecontent 1”)

<div class="examplecontainer col-4">
    <div class="examplebox examplebutton1">
        <div class="exampleboxheader">
title
            <i class="fa fa-chevron-down pull-right exampleboxheadercursoricon1"  aria-hidden="true"></i>
        </div>
        <div class="exampledropdown examplecontent1">
            <div class= "exampledropdowntext1">
abc
            </div>
            <div class="container-fluid w-tapvideo">
                <iframe id="iframevideo" class="iframevideo" title="video" frameborder="0" allow="encrypted-media;" allowfullscreen src="https://www.youtube-nocookie.com/embed/hz_kk_0mG3A?autoplay=0&controls=1&showinfo=0&loop=1"></iframe>
            </div> 
            <a href="beginner/aiminglss.html" class="lsslink"> 
                <div>
                    Full Lesson 🡒
                </div>
            </a>
        </div>
    </div>
</div>


我尝试只打开用户点击的框。
我尽量不使用大量的id,因为我有很多需要相同的JavaScript应用的div/box。另外,我尝试使用$(this).siblings(“.examplecontent1”),但它不起作用(idk如何使用它,我是新来的)。

r8uurelv

r8uurelv1#

您可以直接按类选择元素,并将单击的元素作为上下文。
下面是代码的简化版本,适用于任意数量的元素:

$('.examplebutton1').click(function(e) {
    const dropdown = $('.exampledropdown', this);
    if (dropdown.is(':animated')) return;
    dropdown.slideToggle(500);
    const icon = $('.exampleboxheadercursoricon1', this);
    icon.css('rotate', ((parseFloat(icon.css('rotate')) || 0) + 180) % 360 + 'deg');
});

字符串

相关问题