Jquery切换和添加/删除

Jquery toggle and add/remove

本文关键字：删除 添加 Jquery      更新时间：2023-09-26

我有两个按钮。

两个按钮都有一个滚动css颜色更改。

其中一个按钮只是链接到另一个页面。。但是，单击另一个按钮时需要A.）显示隐藏的div
B.）切换到翻滚颜色并保持该颜色。（但不更改其他按钮类别）

我只想让id为"edit"的按钮将类m-button-regular切换为m-button-active，而不是其他按钮。我正在使用的JQuery将两个按钮类都更改为m-button-active。

这个剧本出了什么问题？

            <a href="#tab1" id="edit" >
            <span class="m-button-small m-button-regular   text-center floatleft clearfix mtm mls" id="sm-tab1">
                <i class="fa fa-gear"></i>
                <p>EDIT</p>
            </span>  
            </a>   
            <a href="#tab1">
            <span class="m-button-small m-button-regular  text-center floatleft clearfix mtm mls" id="sm-tab1">
                <i class="fa fa-plus"></i>
                <p>ADD</p>
            </span>  
            </a>  
<div class="row editcontainer">
</div>

$('.editcontainer').hide();
$(document).ready(function(){
    $('#edit').click(function(){        
        $(".editcontainer").toggle();
        $('.m-button-regular').toggleClass("m-button-active");
    });
});

您需要使用.find()来引用其子span，然后可以使用toggle。

获取由选择器、jQuery对象或元素筛选的当前匹配元素集中每个元素的后代。

使用

$(this).find('.m-button-regular').toggleClass("m-button-active");

而不是

$('.m-button-regular').toggleClass("m-button-active");

这似乎可以满足您的需求：

$('.editcontainer').hide();
$(document).ready(function() {
  $('#edit').click(function() {
    $(".editcontainer").toggle();
    $('#edit').toggleClass("m-button-active");
  });
});
.m-button-active {
    color : green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#tab1" id="edit">
  <span class="m-button-small m-button-regular   text-center floatleft clearfix mtm mls" id="sm-tab1">
                <i class="fa fa-gear"></i>
                <p>EDIT</p>
            </span> 
</a>
<a href="#tab1">
  <span class="m-button-small m-button-regular  text-center floatleft clearfix mtm mls" id="sm-tab1">
                <i class="fa fa-plus"></i>
                <p>ADD</p>
            </span> 
</a>
<div class="row editcontainer" style="display: none">Edit container</div>

顺便说一下，你的选择器最初是同时选择两个按钮的。

这是指所有类：

$('.m-button-regular').toggleClass("m-button-active");

您必须参考按钮

$("#edit").toggleClass("m-button-active");

您几乎是对的，但对代码和宾果略有更改

$('.editcontainer').hide();
$(document).ready(function(){
    $('#edit').click(function(){        
        $(".editcontainer").toggle();
        $('.m-button-regular',this).toggleClass("m-button-active"); //<--- add a scope, same as $(this).find
    });

})；

相关文章：