jQuery点击事件中if-else逻辑失效问题求助

原代码的核心问题是初始化阶段的if-else逻辑完全错误：

• $(".sendToBox1").on("click") 并不是判断按钮是否被点击，而是立即给按钮绑定点击事件，并且返回jQuery对象（永远为真）。这导致第一个if分支永远执行，$sendToBox和$selectedBox只会指向第一个按钮和第一个盒子，第二个按钮根本没绑定点击事件，自然无响应。

修复方案1：分别绑定点击事件 #

直接给两个按钮单独绑定点击逻辑，逻辑清晰直观：

$(document).ready(function() {
  var $input1 = $('.textField');

  // 绑定send to box1的点击事件
  $(".sendToBox1").click(function() {
    $(".box1").append($input1.val());
    $input1.val('');
  });

  // 绑定send to box2的点击事件
  $(".sendToBox2").click(function() {
    $(".box2").append($input1.val());
    $input1.val('');
  });
});

修复方案2：用数据属性优化代码（更简洁可扩展） #

如果后续要增加更多盒子，这种方式不需要重复写绑定逻辑：

首先修改HTML，给发送按钮添加data-target属性，指定对应的目标盒子：

<input class="textField" type="text">

<div class="sendBtn" data-target=".box1">send to box 1</div>
<div class="sendBtn" data-target=".box2">send to box 2</div>

<div class="box1">box 1</div>
<div class="box2">box 2</div>

然后用事件委托绑定统一的点击逻辑：

$(document).ready(function() {
  var $input1 = $('.textField');

  // 给所有.sendBtn绑定点击事件
  $(".sendBtn").click(function() {
    // 获取当前按钮对应的目标盒子选择器
    var targetSelector = $(this).data('target');
    // 插入文本并清空输入框
    $(targetSelector).append($input1.val());
    $input1.val('');
  });
});

内容的提问来源于stack exchange，提问作者dtd439