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

Posted 2023-03-14

【中文标题】如何从另一个按钮激活一个按钮

【英文标题】：How to activate a button from another button

【发布时间】：2017-07-01 19:28:21

【问题描述】：

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

$("#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

你能帮我找出我缺少的东西吗？

【问题讨论】：

One button firing another buttons click event的可能重复

为什么在你的第二个按钮点击处理程序中你试图为不存在的类'#btn'按钮设置'活动'类？

你所说的火是什么意思。你需要在第二个按钮上触发点击事件吗？？？

【参考方案1】：

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

你有一些错误： - 第一个 #btn 解析为空（这不是您的 DOM 中的 ID） - 您正在添加一个“活动”类，因此您必须在 csss 中瞄准该类。请注意，我将 ':'（伪元素）更改为 '.'（类选择器）

#first_btn.active
  background-color: yellow;

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

已编辑：

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

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

我在这里做的是设置一个“活动”类（将按钮涂成黄色）并在 0.1 秒的时间段后再次切换该类（恢复原始按钮颜色）。

你怎么看？

【讨论】：

是的，上面的语法使第一个按钮的背景颜色在第二个按钮被触发时变为黄色。现在，问题是第一个按钮的背景颜色会永久更改，而不是短时间

运行代码sn-p，你就会明白我在说什么了

【参考方案2】：

您需要的是模拟按钮单击动作：第二个按钮的行为与第一个按钮相似。

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

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

【参考方案3】：

你把类改错了元素，把$('#btn')改成$('#first_btn')：

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

另外，你需要使用更通用的类，像这样：

.active 
  background-color: yellow;

【讨论】：

很好看。但是，这并没有解决问题

它将背景颜色永久更改为黄色，这不是我想要的

请运行代码 sn -p 你会明白我在说什么

但是这个 CSS 不仅仅适用于第一个按钮，它适用于任何具有活动类的元素

@AvaLucas 哦，是的，当前代码只会更改一次，但您可以使用 toggleClass 或 removeClass（正如 Jose Gomez 和 Nhon Dinh 建议的那样）。

【参考方案4】：

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

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

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

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

【讨论】：

我已经检查过了 :)

【参考方案5】：

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

问题是您正在添加一个 css 类，但在您的 css 中，您为按钮的 :active state 声明了样式，而不是一个类，您可以保留该声明并添加.active class 所以你的css代码看起来像这样：

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

添加该类而不是替换 state (:active) 您将涵盖两种情况，即直接单击 first_btn 和单击 second_btn 时。

【参考方案6】：

$("#second_btn").click(function()
    $('#first_btn').click();
   $('#first_btn').addClass('active');
)
#first_btn.active
background-color:yellow;

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

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

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

【讨论】：

它永久改变了我不想要的背景颜色

请运行代码 sn -p 你会明白我在说什么

这只会在类活动时改变颜色。但是当你删除类活动时......你可以有其他默认的 CSS。 @AvaLucas

如果您不希望按钮在单击后变为黄色，请在事件处理程序中添加为 setTimeout 函数并删除活动类。@AvaLucas