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

Question

I am trying to open/close elements by toggling class on click event.I am using Jquery. But on clicking all elements get opened (which have same class) however only want the one which is clicked to be opened. Here's the link to the Demo Page: http://www.lindsaysteele.com/demo-page-1 HTML Structure:

<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>

The jquery code i am using:

$(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

You can do it like this:

Just create a class for the selected item and remove it from everyone just before adding it again on the clicked item.

 $(".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>