javascript - jQuery - 如何修复多个按钮的不同事件？

Question

我刚刚开始接触 jQuery，因此正在进行一些练习...但是我遇到了这个问题:DOM 中有两个按钮，当然每个按钮都应该执行不同的操作。但是我无法找到一种方法来归因不同的操作。有人可以帮忙吗？ 这是 HTML:

<div class="content">
          <input type="text" class="my-input">

          <button class="set-button">Set</button>
          <button class="my-button">Add</button>
</div>
<h4>Output</h4>
<div id="output"> 

这就是我到目前为止所做的:

$('.content').click(function(){

   var $input = $(this).find('input')
   var input = $input.val();

   $('#output').text(input)
   console.log (input);        
   });
});

问题显然在于我没有调用特定按钮来读取输入 - 我只是无法弄清楚将按钮的选择器放在哪里，或者至少如果我这样做了代码没有不再工作了。可能看起来很傻，但我仍在学习。 非常感谢!

Answer 1

您正在调用

$('.content').click(function(){}

但是类.content是一个包装器..它包装了整个div 您应该使用按钮标签 set-button 和 my-button 中的选择器，单击后将触发该功能

现在你有两个不同的类，所以你应该创建两个函数

$('.set-button').click(){/* logic */}
$('.my-button').click(/* logic */){}

清楚了吗？