添加和删除多个元素的类(JQuery和JavaScript)

huangapple go评论60阅读模式
英文:

Add and remove classes for multiple elements (JQuery & JavaScript)

问题

我能够得到一个合适的答案来编辑我之前问题中的代码。

前一个问题的链接:
https://stackoverflow.com/questions/76328546/add-and-remove-classes-for-multiple-elements/76328793#76328793

现在我已经改进了之前的代码,并为其添加了内容,当单击图标时,其内容将显示或隐藏。

这个代码的问题是,单击任何可用图标时,所有图标的内容都会显示或隐藏。

但这不是我想要的。我希望通过单击每个图标来显示相应的内容,并且通过单击另一个图标,所有内容都将被隐藏,只有与单击的图标相关的内容将被显示。

$('body').on('click', '.icon_product', function() {
    $(this).toggleClass("change_icon-product");
    $(this).parent().siblings().find('.icon_product').removeClass("change_icon-product");
    $(this).find(".txt-content").toggleClass("Toggle_txt-content");
});
.icon_product {
    display: inline-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);
}

.txt-content {
    display: none;
}

.Toggle_txt-content {
    display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
    <div class="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
            <div class="txt-content">
                <h3>Lorem ipsum</h3>
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                    harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                </p>
            </div>
        </div>
    </div>

    <div class="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
            <div class="txt-content">
                <h3>Lorem ipsum</h3>
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                    harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                </p>
            </div>
        </div>
    </div>

    <div class="main-content_product">
        <div class="icon_product">
            <div class="icon-line1_product test"></div>
            <div class="icon-line2_product test"></div>
            <div class="txt-content">
                <h3>Lorem ipsum</h3>
                <p>
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                    harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                </p>
            </div>
        </div>
    </div>
</section>
英文:

I was able to get a suitable answer to edit the code in my previous question.

Link to previous question:
https://stackoverflow.com/questions/76328546/add-and-remove-classes-for-multiple-elements/76328793#76328793

Now I have developed the previous code and added content to it that when the icon is clicked, its content will be shown or hidden.

The problem with this code is that by clicking on any of the available icons, the contents of all of them will appear or hide.

But that's not what I want. I want to display the corresponding content by clicking on each icon, and by clicking on another icon, all the content will be hidden and only the content related to the icon that was clicked will be displayed.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(&#39;body&#39;).on(&#39;click&#39;, &#39;.icon_product&#39;, function() {
$(this).toggleClass(&quot;change_icon-product&quot;);
$(this).parent().siblings().find(&#39;.icon_product&#39;).removeClass(&quot;change_icon-product&quot;);
$(this).find(&quot;.txt-content&quot;).toggleClass(&quot;Toggle_txt-content&quot;);
});

<!-- language: lang-css -->

.icon_product {
display: inline-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);
}
/* 
*
*
*
*/
.txt-content {
display: none;
}
.Toggle_txt-content {
display: block;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;section&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

<!-- end snippet -->

答案1

得分: 2

以下是您要翻译的内容:

所以,如果另一个内容也打开了,您想要删除其他内容,只需添加一行代码:

$(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");

上面的代码行在另一个内容打开时删除或隐藏其他内容。

这是演示:

<!-- 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");
    $(this).find(".txt-content").toggleClass("Toggle_txt-content");
    $(this).parent().siblings().find('.txt-content').removeClass("Toggle_txt-content");
});

<!-- language: lang-css -->
body {
  background: transparent; /* Make it white if you need */
  color: #fcbe24;
  padding: 0 24px;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.icon_product {
    display: inline-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);
}


/* 
*
*
*
 */

.txt-content {
    display: none;
}

.Toggle_txt-content {
    display: block;
}

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>

            <div class="main-content_product">
                <div class="icon_product">
                    <div class="icon-line1_product test"></div>
                    <div class="icon-line2_product test"></div>

                    <div class="txt-content">
                        <h3>Lorem ipsum</h3>
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                        </p>
                    </div>

                </div>
            </div>

            <div class="main-content_product">
                <div class="icon_product">
                    <div class="icon-line1_product test"></div>
                    <div class="icon-line2_product test"></div>

                    <div class="txt-content">
                        <h3>Lorem ipsum</h3>
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                        </p>
                    </div>

                </div>
            </div>

            <div class="main-content_product">
                <div class="icon_product">
                    <div class="icon-line1_product test"></div>
                    <div class="icon-line2_product test"></div>

                    <div class="txt-content">
                        <h3>Lorem ipsum</h3>
                        <p>
                            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
                            harum voluptatum fuga, nam tempore exercitationem dolore placeat.
                        </p>
                    </div>

                </div>
            </div>

    </section>

<!-- end snippet -->

希望这能帮助您!

英文:

So, you want to remove other contents too, if another one is open for that you only had to add one line of code :

$(this).parent().siblings().find(&#39;.txt-content&#39;).removeClass(&quot;Toggle_txt-content&quot;);

The above line removes or hides other contents once the another one opens.

Here is the demo :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(&#39;body&#39;).on(&#39;click&#39;, &#39;.icon_product&#39;, function() {
$(this).toggleClass(&quot;change_icon-product&quot;);
$(this).parent().siblings().find(&#39;.icon_product&#39;).removeClass(&quot;change_icon-product&quot;);
$(this).find(&quot;.txt-content&quot;).toggleClass(&quot;Toggle_txt-content&quot;);
$(this).parent().siblings().find(&#39;.txt-content&#39;).removeClass(&quot;Toggle_txt-content&quot;);
});

<!-- language: lang-css -->

body {
background: transparent; /* Make it white if you need */
color: #fcbe24;
padding: 0 24px;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: -apple-system, BlinkMacSystemFont, &#39;Segoe UI&#39;, Roboto, Oxygen, Ubuntu, Cantarell, &#39;Open Sans&#39;, &#39;Helvetica Neue&#39;, sans-serif;
}
.icon_product {
display: inline-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);
}
/* 
*
*
*
*/
.txt-content {
display: none;
}
.Toggle_txt-content {
display: block;
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;section&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;main-content_product&quot;&gt;
&lt;div class=&quot;icon_product&quot;&gt;
&lt;div class=&quot;icon-line1_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;icon-line2_product test&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;txt-content&quot;&gt;
&lt;h3&gt;Lorem ipsum&lt;/h3&gt;
&lt;p&gt;
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias suscipit necessitatibus nobis
harum voluptatum fuga, nam tempore exercitationem dolore placeat.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月25日 15:31:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76329863.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定