英文:
Add and remove classes for multiple elements
问题
I have translated the non-code portion of your text:
"使用CSS和JavaScript，我设计了一个可变换的按钮，当点击时会变成打开和关闭。
我的代码工作正常，但是当一个按钮被点击并从关闭状态变为打开状态时，我希望所有其他按钮无论它们处于什么状态，都返回到第一个（关闭）状态。
我之所以要创建这种状态，是因为我想把这段代码放在一个滑块内，当用户在多个滑块中点击按钮时，按钮会显示在错误的状态。"
If you have any specific questions or need further assistance with your code, please feel free to ask.
英文:
Using css and javascript, I have designed a transformable button that changes to open and close when clicked.
My code works fine, but I want when a button is clicked and it changes from closed to open, all the other buttons in whatever state they were in return to the first (closed) state.
The reason why I want to create such a state is that I want to put the code inside a slider and when the user clicks on the button in several slides, the button will be displayed in the wrong state.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('body').on('click', '.icon_product', function () {
if (this.classList.contains("icon_product")) {
$(this).toggleClass("change_icon-product");
} else {
$(this).removeClass("change_icon-product");
}
});
<!-- language: lang-css -->
.icon_product {
display: block;
cursor: pointer;
position: relative;
padding: 15px;
margin-top: 0px;
}
.icon-line1_product,
.icon-line2_product {
width: 35px;
height: 5px;
background-color: #f00;
margin: 6px 0;
border-radius: 10px;
transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
}
.icon-line2_product {
transform: rotate(90deg) translate(-11px, 0px);
-webkit-transform: rotate(90deg) translate(-11px, 0px);
-moz-transform: rotate(90deg) translate(-11px, 0px);
-o-transform: rotate(90deg) translate(-11px, 0px);
-ms-transform: rotate(90deg) translate(-11px, 0px);
}
.change_icon-product .icon-line1_product {
transform: rotate(45deg) translate(8px, 0px);
-webkit-transform: rotate(45deg) translate(8px, 0px);
-moz-transform: rotate(45deg) translate(8px, 0px);
-o-transform: rotate(45deg) translate(8px, 0px);
-ms-transform: rotate(45deg) translate(8px, 0px);
}
.change_icon-product .icon-line2_product {
transform: rotate(-45deg) translate(8px, 0px);
-webkit-transform: rotate(-45deg) translate(8px, 0px);
-moz-transform: rotate(-45deg) translate(8px, 0px);
-o-transform: rotate(-45deg) translate(8px, 0px);
-ms-transform: rotate(-45deg) translate(8px, 0px);
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
</div>
</div>
<div id="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
</div>
</div>
<div id="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
</div>
</div>
<div id="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
</div>
</div>
</section>
<!-- end snippet -->
答案1
得分: 2
Use siblings() 方法来查找父元素的兄弟元素，并从 .icon_product 中移除类。
$('body').on('click', '.icon_product', function() {
$(this).toggleClass("change_icon-product");
$(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
});
这段代码是用来处理点击 .icon_product 元素时的行为，切换类名以及处理父元素的兄弟元素的类。
英文:
Use siblings() to find parent's siblings and remove class from .icon_product.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$('body').on('click', '.icon_product', function() {
$(this).toggleClass("change_icon-product");
$(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
});
<!-- language: lang-css -->
.icon_product {
display: block;
cursor: pointer;
position: relative;
padding: 15px;
margin-top: 0px;
}
.icon-line1_product,
.icon-line2_product {
width: 35px;
height: 5px;
background-color: #f00;
margin: 6px 0;
border-radius: 10px;
transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
}
.icon-line2_product {
transform: rotate(90deg) translate(-11px, 0px);
-webkit-transform: rotate(90deg) translate(-11px, 0px);
-moz-transform: rotate(90deg) translate(-11px, 0px);
-o-transform: rotate(90deg) translate(-11px, 0px);
-ms-transform: rotate(90deg) translate(-11px, 0px);
}
.change_icon-product .icon-line1_product {
transform: rotate(45deg) translate(8px, 0px);
-webkit-transform: rotate(45deg) translate(8px, 0px);
-moz-transform: rotate(45deg) translate(8px, 0px);
-o-transform: rotate(45deg) translate(8px, 0px);
-ms-transform: rotate(45deg) translate(8px, 0px);
}
.change_icon-product .icon-line2_product {
transform: rotate(-45deg) translate(8px, 0px);
-webkit-transform: rotate(-45deg) translate(8px, 0px);
-moz-transform: rotate(-45deg) translate(8px, 0px);
-o-transform: rotate(-45deg) translate(8px, 0px);
-ms-transform: rotate(-45deg) translate(8px, 0px);
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
</div>
</div>
<div id="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
</div>
</div>
<div id="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
</div>
</div>
<div id="main-content_product">
<div class="icon_product">
<div class="icon-line1_product test"></div>
<div class="icon-line2_product test"></div>
</div>
</div>
</section>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论