jquery click if else 语句不起作用-解网

问：

我尝试输入文本，然后通过单击其中一个框选项将该文本放置到特定的 div 框中

HTML 代码：

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

  <div class="sendToBox1">send to box 1</div>
  <div class="sendToBox2">send to box 2</div>
  
  <div class="box1">box 1</div>
  <div class="box2">box 2</div>

jQuery代码：

$(document).ready(function() {
  var $input1 = $('.textField');
  
  var $sendToBox;
  var $selectedBox;
  
  if($(".sendToBox1").on("click")) {
     $sendToBox = $(".sendToBox1");
     $selectedBox = $(".box1");
  } else if($(".sendToBox2").on("click")) {
     $sendToBox = $(".sendToBox2");
     $selectedBox = $(".box2");
  }

  $($sendToBox).click(function() {
    $($selectedBox).append($input1.val());
    $input1.val('');
  });
  
});

我希望 if else 语句做的是将类名 .sendToBox1 或 .sendToBox2 存储为要$sendToBox的值，具体取决于单击哪个框选项，并且 .box1 或 .box2 也同样作为值存储到变量 $selectedBox。单击其中一个框选项后，类名应存储在 2 个变量中，同时将文本放置到所选的 div 框中。问题是else if语句似乎不起作用。

发生的情况是，在键入文本后，我单击发送到框 1，它将类名 .sendToBox1 和 .box1 存储到变量 $sendToBox 和 $selectedBox然后也成功地将文本放置在框 1 中，但在键入另一个文本并尝试通过单击第二个框选项将文本放置在第二个框内后，这是行不通的。在您自己的设备上运行它可能会有所帮助，以便更好地查看问题。我希望我的解释是可以理解的，并且有人可以帮助修复代码。谢谢。

jquery if-语句 onclick

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

  var $sendToBox;
  var $selectedBox;

  $(".sendToBox1").on("click", function() {
    $selectedBox = $(".box1");
  });
  $(".sendToBox2").on("click", function() {
    $selectedBox = $(".box2");
  });

  $(".sendToBox1,.sendToBox2").click(function() {
    $($selectedBox).append($input1.val());
    $input1.val('');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


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

  <div class="sendToBox1">send to box 1</div>
  <div class="sendToBox2">send to box 2</div>
  
  <div class="box1">box 1</div>
  <div class="box2">box 2</div>

但是，这并不“感觉”正确，因为同一事件有多个点击处理程序。相反，将“send to”部分移动到它自己的函数，并从事件处理程序中调用：

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

  var $sendToBox;
  var $selectedBox;

  $(".sendToBox1").on("click", function() {
    sendTo($input1, $(".box1"));
  });
  $(".sendToBox2").on("click", function() {
    sendTo($input1, $(".box2"));
  });
  
  function sendTo(from, to) {
     to.append(from.val());
     from.val("");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


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

  <div class="sendToBox1">send to box 1</div>
  <div class="sendToBox2">send to box 2</div>
  
  <div class="box1">box 1</div>
  <div class="box2">box 2</div>

这导致了下一步：如果您想将发送添加到/框 3 怎么办？重复相同的代码？相反，请编写代码，使其由数据驱动：

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

  $(".sendTo").on("click", function() {
    var box = $(this).data("sendto");
    $(`[data-box='${box}']`).append($input1.val())
    $input1.val("");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


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

  <div class="sendTo" data-sendto='box1'>send to box 1</div>
  <div class="sendTo" data-sendto='box2'>send to box 2</div>
  
  <div data-box="box1">box 1</div>
  <div data-box="box2">box 2</div>

现在，在添加另一个框时，您只需添加：

<div class="sendTo" data-sendto='box3'>send to box 3</div>
<div data-box="box3">box 3</div>

并且不进行任何代码更改。

在这种情况下，即使您从不添加第 3 个框，代码仍然更加简洁。

不清楚“include localstorage”是什么意思 - 但假设您的 localstorage 是基于密钥的，那么数据驱动的代码将指示该密钥将存储在 HTML 上的数据属性中。（数据驱动并不意味着数据属性，这只是数据存储/传递给 js 的方式，它可以是 json）

0赞 dtd439 3/17/2023

是的，基于密钥的。我在放置 getItem 和 setItem 的位置遇到麻烦。如果它不能应用于第三个，那么第二个就好了。

0赞 freedomn-m 3/17/2023

如果它能帮助你回答你提出的问题，我建议你接受这个答案，然后问一个关于 localstage 的新问题，包括你的代码（例如，它适用于选项 2）并询问如何为选项 3 实现它。如果你在这里添加一个链接，我可能会拿起它看一看，但除此之外，其他人也可能会提供答案。

0赞 dtd439 3/18/2023

stackoverflow.com/questions/75771254/....我问如何在第三个选项上实现它。您不会看到任何代码更改。我几乎不知道如何在第二个选项上使用它。顺便说一句，你的回答确实有助于我之前提出的问题

上一个：两个不同的 window.open（location）在不同的 if 块中进入同一目标

下一个：如果 textarea 包含此文本，则运行查询

jquery click if else 语句不起作用

jquery click if else statement not working

评论

评论