Question

我尝试了几种不同的代码配置但没有成功：

jQuery(document).ready(function($){
 $(".open-drawer").click(function (event) {
      event.preventDefault();
 $(".drawer-out").toggleClass("opencan");
 });

}）

以上代码将打开和关闭抽屉，页面上只有10个a.open-drawer实例，当点击其中任何一个时，它们都会打开。

我试过removeClass但没有运气......

jQuery(document).ready(function($){
 $(".open-drawer").click(function (event) {
      event.preventDefault();
 $(".drawer-out").removeClass("opencan");
 this.addClass("opencan")
 });

}）

我看到的代码示例与原始代码有很大不同，任何爱都非常受欢迎。

这是在页面上重复的事件的HTML，打开的抽屉的链接是从底部开始的12行，抽屉html就在它的下面。

<div class="grid-100 parent-grid vatx-eventlist">
<div class="grid-30 mobile-grid-100">
    <span style="float:left; width: 150px;margin-right:15px;">#_EVENTIMAGE</span>
</div>
<div id="mainevent" class="grid-70 mobile-grid-100">
    <span class="eventdate"> #_{l, F j} <br /></span>
    <h2><a href="#_EVENTURL">#_EVENTNAME</a></h2>   
    <span>Doors Open: #_ATT{Doors Open:} </span><br />
    <span>Tickets: #_ATT{ Tickets price $}</span><br />
    <span>Age: #_ATT{Age restrictions?} <!-- <a href="#_ATT{rsvp link}">RSVP</a> --></span><br/>
    <span id="#_ATT{custom field 1 yes or no?}">#_ATT{Custom Field 1:} </span><br />
    <span id="#_ATT{custom field 2 yes or no?}">#_ATT{Custom Field 2:} </span><br />
    <a class="grid-15 tablet-grid-30 mobile-grid-30 facebook txt-align-center" href="http://facebook.com/vulcanatx" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="grid-15 tablet-grid-30 mobile-grid-30 instagram txt-align-center" href="http://instagram.com/vulcanatx" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="grid-15 tablet-grid-30 mobile-grid-30 twitter txt-align-center" href="http://twitter.com/vulcanatx" target="_blank"><i class="fa fa-twitter"></i></a>
    <div class="event-buttons grid-35 mobile-grid-100 txt-align-right">
        <a class="event-btn gold-button" id="#_ATT{Tickets yes or no ?}" href="#_ATT{Ticket URL  please include http://}" target="_blank" />Buy Tickets</a><br />
        <a class="event-btn table-button" href="#">Table Service</a>
        <br />
        <a id="open-drawer" class="open-drawer event-btn more-button" href="#">More</a>
    </div>  

</div>
<div class="grid-100 drawer-out">
    <div class="drawer">
        <div class="container">
            <span>Description:</span>#_EVENTNOTES<br /></p>
        </div>
    </div>
</div>

Answer 1

它只会为点击的元素切换类

$(".open-drawer").click(function (event) {
    event.preventDefault();
    $(this).toggleClass("opencan");
});

但是在你的例子中，你试图切换不同元素的类。如果你需要为相关元素添加类（不是为了点击），它将是另一个代码。你能发贴你的HTML吗？

jQuery将Class添加到单个实例

1 个答案: