Question

我的问题与之前提出的其他问题有点不同，因为我主要想要激活但是（不仅仅是激活它）。这是我的合成器：

$("#second_btn").click(function(){
       $('#first_btn').addClass('active');
    })

#first_btn{
      background-color: green;
    }
    #first_btn:active{
      background-color: yellow;
    }
    
    #first_btn.active{
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="first_btn">
    first_btn
    </button>
    <button id="second_btn">
    second_btn
    </button>

基本上我要找的是当点击第二个按钮时我想要第一个按钮被触发，按钮的颜色（第一个）也应该变成黄色，就像点击按钮一样。

以下是jsFiddle版本：click here

你能帮我辨别一下我错过的东西吗？

Answer 1

$('#btn').addClass('active');

你有一些错误： - 首先#btn解析为空（这不是DOM中的ID） - 你正在添加一个“主动”课程，所以你必须在你的CSS中瞄准那个课程。注意我更改了'。'（类选择器）

的'：'（伪元素）

#first_btn.active{
  background-color: yellow;
}

尝试一下，如果遇到更多麻烦就来这里;）

编辑：

这可能不是最好的方法，但它可能有助于实现您的目标：

$("#second_btn").click(function(){
    $('#first_btn').toggleClass('active');
  window.setTimeout(function(){
    $('#first_btn').toggleClass('active');
  }, 100);
})

我在这里做的是设置一个'活动'类（绘制黄色按钮），然后在0.1秒后再次切换该类（恢复原始按钮颜色）。

您怎么看？

Answer 2

您正在将班级更改为错误的元素，将$('#btn')更改为$('#first_btn')：

$("#second_btn").click(function(){
  $('#first_btn').addClass('active');
});

此外，您需要使用更多泛型类，如下所示：

.active {
  background-color: yellow;
}

Answer 3

你需要的是按钮点击动作的模拟：第二个按钮的行为类似于第一个按钮。

  $("#first_btn").mousedown(function(){
     $("#second_btn").addClass("active");
   });
   $("#first_btn").mouseup(function(){
     $("#second_btn").removeClass("active");
   });

如果您想在第二个按钮上执行真正的“点击”操作，可以在添加/删除课程后添加事件链接

Answer 4

{{1}}

这将触发事件，点击第一个按钮，并将颜色更改为黄色。

然后定义处理程序以处理第一个按钮单击以处理事件

在你提供的小提琴版本中，你将活动类分配给错误的ID。同时为第一个按钮添加触发器点击事件。

Answer 5

你应该给一个类的样式，所以：

#first_btn.active{ // not :active
    background-color: yellow;
}

如果你想模拟点击第一个按钮，你应该添加smth。那样：

$('#first_btn').click();

Answer 6

我假设您没有注意到，但在jsFiddle代码中，第一个按钮的jQuery选择器是错误的，但是您的问题在这里是可以的，所以我会忽略它。

问题是你要添加一个css类但是在你的css中你已经为按钮的:active 状态声明了样式，而不是一个类，你可以保留该声明和添加.active类，以便您的css代码如下所示：

#first_btn:active,
#first_btn.active {
  background-color: yellow;
}

添加该类而不是替换状态（:active），直接点击first_btn和点击second_btn时，您将涵盖这两种情况。

如何从另一个按钮激活按钮

6 个答案: