Question

当我点击名为＆＃34; vis＆＃34;的类时，事情开始出现，其他项目消失。单击该项时，它将删除名称为＆＃34; vis＆＃34;的所有类，只有已单击的项才会获得一个名为＆＃34; clickyEvent＆＃34;的新类。事实上，当我点击一个隐藏的项目时，它的类被删除了（＆＃34; vis＆＃34;），点击事件仍然有效并使其可见，这会导致错误。（导致错误，所以我把这些东西放在评论中）

我想要的是当我点击圆圈（vis）时，其他项目消失（工作），当我点击一个不可见的项目时，没有任何反应。

当我点击后退按钮时，一切都恢复到原来的状态。我想要的另一件事是，当我再次点击我点击的项目（没有消失的项目）时，它也会恢复正常状态（与后退按钮相同的事件）。（DOESN＆＃39; T WORK）

这是我的HTML

        <section class="pakketten">
        <header>
            <h1>Pakketten</h1>
        </header>
        <button class="back">back</button>
        <div class="pakket">
            <div class="vis">
                <div class="circle">
                    <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">
                </div>
            </div>
            <div class="invis-wrapper">
                <div class="invis">
                    <h2>Jets</h2>
                    <p>Een « jet pack », deze jets kun je aansluiten op jouw voertuig. Door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>
                </div>
            </div>
        </div>
        <div class="pakket">
            <div class="vis">
                <div class="circle">
                    <img src="_img/rockets.png" width="93" height="122" alt="rockets" name="rockets">
                </div>
            </div>
            <div class="invis-wrapper">
                <div class="invis">
                    <h2>Jets</h2>
                    <p>Een « jet pack », deze jets kun je aansluiten op jouw voertuig. Door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>
                </div>
            </div>
        </div>
        <div class="pakket">
            <div class="vis">
                <div class="circle">
                    <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">
                </div>
            </div>
            <div class="invis-wrapper">
                <div class="invis">
                    <h2>Jets</h2>
                    <p>Een « jet pack », deze jets kun je aansluiten op jouw voertuig. Door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>
                </div>
            </div>
        </div>
        <div class="pakket">
            <div class="vis">
                <div class="circle">
                    <img src="_img/bal.png" width="94" height="96" alt="bal" name="bal">
                </div>
            </div>
            <div class="invis-wrapper">
                <div class="invis">
                    <h2>Jets</h2>
                    <p>Een « jet pack », deze jets kun je aansluiten op jouw voertuig. Door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>
                </div>
            </div>
        </div>
        <div class="pakket">
            <div class="vis">
                <div class="circle">
                    <img src="_img/jets.png" width="71" height="107" alt="jets" name="jets">
                </div>
            </div>
            <div class="invis-wrapper">
                <div class="invis">
                    <h2>Jets</h2>
                    <p>Een « jet pack », deze jets kun je aansluiten op jouw voertuig. Door de kleine boost spring je als ware in de lucht voor een korte tijd en kun je langs een heleboel obstakels geraken, ook kan het gebruikt worden om coole tricks uit te voeren.</p>
                </div>
            </div>
        </div>
    </section>

这是我的js

    $(".vis").click(function () {
    $(this).siblings(".invis-wrapper").css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 800);
    $(this).siblings(".invis-wrapper").addClass("clicked");
    // $(this).addClass("clickyEvent");
    $(".vis").not(this).addClass("invisfade");
    $('.invisfade').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 800);
    // $("div").removeClass("vis");
});

$(".clickyEvent").click(function() {
    removeStuff();
    console.log("ok");
});

    $(".back").click(function() {
      // $(".invis-wrapper:visible").fadeToggle(1000);
      removeStuff();
    });
}

function removeStuff() {
      $('.invisfade').css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 800);
      $(".clicked").css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 800);
      $(".clicked").removeAttr("style");
      // $(".clicked").addClass("vis");
      // $(".invisfade").addClass("vis");
      $("div").removeClass("clicked");
      $("div").removeClass("invisfade");
}

Answer 1

您想使用委托。你在这里绑定点击处理程序的方式，元素不再具有你用来选择它的类的事实并不重要。您根据某些条件选择了一些元素，并为它们附加了一个事件处理程序。试试这个：

$("section.pakketten").on("click", ".vis", function () {
    $(this).siblings(".invis-wrapper").css({opacity: 0, visibility: "visible"}).animate({opacity: 1.0}, 800);
    $(this).siblings(".invis-wrapper").addClass("clicked");
    $(this).addClass("clickyEvent");
    $(".vis").not(this).addClass("invisfade");
    $('.invisfade').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 800);
    $("div").removeClass("vis");
});

单击已删除的类仍会发出click事件

1 个答案: