Jquery 切换和添加/删除答案

【问题标题】：Jquery toggle and add/removeJquery 切换和添加/删除
【发布时间】：2015-03-05 15:39:35
【问题描述】：

我有两个按钮。

两个按钮都有一个翻转的 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");
    });

});

【问题讨论】：

我不知道。怎么回事？我们无法判断 - 发生了什么？

标签： javascript jquery html css

【解决方案1】：

你需要使用.find()来引用它的子跨度，然后你可以使用toggle。

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

使用

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

而不是

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

【讨论】：

【解决方案2】：

这似乎是你想要的：

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

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

【讨论】：

这对我不起作用。也许是因为我的 CSS 设置方式。
好吧，我根据您在问题中发布的内容编写了一个有效的 sn-p。我猜不出你剩下的代码，伙计 :-)
我很感激。但它没有用。我认为我看到它的原因是因为我需要删除类 m-button-regular 并将其与 m-button-active 交换为该按钮。您的代码只是添加了刚刚添加绿色文本的类 m-button-active 。它没有切换课程。

【解决方案3】：

这是指所有类：

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

你必须引用按钮

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

【讨论】：

【解决方案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
    });

});

【讨论】：