Jquery - 我只想为单击按钮的元素切换 class。 目前它为所有具有相同 class 的元素切换

Question

我正在尝试通过在单击事件上切换 class 来打开/关闭元素。我正在使用 Jquery。 但是在单击时，所有元素都会打开（具有相同的类），但只希望打开被单击的元素。 这是演示页面的链接： http://www.lindsaysteele.com/demo-page-1 HTML 结构：

<div class="sqs-block image-block sqs-block-image sqs-text-ready" data-block-type="5" id="block-yui_3_17_2_1_1660582617675_7984">
  <div class="sqs-block-content" id="yui_3_17_2_1_1660757592153_72">
    <figure
      class="sqs-block-image-figure image-block-outer-wrapper image-block-v2 design-layout-card combination-animation-none individual-animation-none individual-text-animation-none image-position-left image-linked sqs-narrow-width sqs-text-ready menu-plugin unactive"
      data-scrolled=""
      data-test="image-block-v2-outer-wrapper"
      id="yui_3_17_2_1_1660757592153_71"
    >
      <div class="intrinsic" id="yui_3_17_2_1_1660757592153_70">
        <div class="image-inset" data-animation-role="image" data-description="" id="yui_3_17_2_1_1660757592153_69">
          <div class="sqs-image-shape-container-element content-fit" style="position: relative; overflow: hidden;" id="yui_3_17_2_1_1660757592153_68">
            <noscript><img class="sqs-image-min-height" src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg" alt="" loading="lazy" /></noscript>
            <img
              class="sqs-image-min-height loaded"
              data-src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg"
              data-image="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg"
              data-image-dimensions="900x900"
              data-image-focal-point="0.5,0.5"
              alt=""
              loading="lazy"
              data-parent-ratio="333.0"
              style="left: 166px; top: 0px; width: 1px; height: 1px; position: absolute;"
              data-image-resolution="500w"
              src="https://images.squarespace-cdn.com/content/v1/52437378e4b02cd2cb2b1250/991c3f4c-e82c-45b0-9216-bc4429b1e9bb/Dumplings.jpg?format=500w"
            />
            <div class="image-overlay" style="overflow: hidden;"></div>
          </div>
        </div>
      </div>

      <figcaption class="image-card-wrapper" data-width-ratio="">
        <div class="image-card sqs-dynamic-text-container">
          <div class="image-title-wrapper">
            <div class="image-title sqs-dynamic-text" data-width-percentage="23.3" style="font-size: max(0.75rem, 23.3%);">
              <p class="" style="white-space: pre-wrap;"><strong>Johnny Walker Black Dumplings</strong></p>
            </div>
          </div>

          <div class="image-subtitle-wrapper">
            <div class="image-subtitle sqs-dynamic-text" data-width-percentage="23.3" style="font-size: max(0.75rem, 23.3%);">
              <p class="min-font-set" style="white-space: pre-wrap;">Local ground pork, Johnnie Walker Black Whiskey, green onion, sesame oil, sriracha aioli, sweet soy handmade by @TheRealDumplingKing.</p>
            </div>
          </div>

          <div class="image-button-wrapper photo-btn">
            <span class="item-photo-btn"><i class="br-ico"></i></span>
          </div>
        </div>
      </figcaption>
    </figure>
  </div>
</div>

我正在使用的 jquery 代码：

$(function(){  
$( ".image-button-wrapper").addClass( "photo-btn");
$( ".design-layout-card").addClass( "menu-plugin");
$( ".design-layout-card").addClass( "unactive");
$( ".image-button-wrapper" ).click(function() {
 $( ".design-layout-card").toggleClass( "unactive", 1000);
})
});

Answer 1

你可以这样做：

只需为所选项目创建一个 class 并将其从所有人中删除，然后再将其添加到单击的项目上。

 $(".list-item").on("click", function(){ $(".list-item").removeClass("active"); $(this).addClass("active"); });

 ul li{ padding: 6px 15px; list-style: none; margin: 5px 0px; border: 1px solid #000000; cursor: pointer; width: fit-content; } li.active{ background-color: red; color: white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="list-item active">Option 1</li> <li class="list-item">Option 2</li> <li class="list-item">Option 3</li> <li class="list-item">Option 4</li> <li class="list-item">Option 5</li> </ul>