Question

我有两个按钮。

两个按钮都有翻转css颜色更改。

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

我只想要ID为＆＃34的按钮;编辑＆＃34;将类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");
    });

});

Answer 1

您需要使用.find()来引用其子跨度，然后您可以使用切换。

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

使用

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

而不是

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

Answer 2

这是指所有课程：

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

您必须参考按钮

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

Answer 3

这似乎可以做你想要的：

＆＃13;

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

＆＃13;

.m-button-active {
    color : green;
}

＆＃13;

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

＆＃13;

顺便说一句，您的选择器最初选择了两个按钮。

Answer 4

你几乎是对的，但对你的代码和宾果游戏稍作改动

$('.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
    });

}）;

Jquery切换并添加/删除

4 个答案: