我尝试输入一个文本,然后通过单击其中一个框选项将该文本放置到特定的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语句似乎不起作用。
输入文本后,我单击send to box 1,它将类名.sendToBox1和.box1存储到变量$sendToBox和$selectedBox中,然后也成功地将文本放置到box 1中,但在输入另一个文本并尝试通过单击第二个box选项将文本放置到第二个box中后,它不工作.它可能帮助运行它在你自己的设备上看问题更好.我希望我的解释是可理解的并且那某人能帮助修正代码.谢谢.
1条答案
按热度按时间bmp9r5qi1#
jQuery方法链- so $(“.sendToBox1”).on(“click”)== $(“.sendToBox1”)(有点像,不完全是),所以if语句是if(jquery_is_an_object),它总是这样。
不要认为 “如果box 1被单击”,而要认为它是“* 当box 1被单击时 *",这只是另一个事件处理程序。
在不过多更改代码概念的情况下,这看起来与您的预期相符:
但是,这感觉不太对,因为同一个事件有多个click处理程序,相反,将“send to”部分移到它自己的函数中,并从事件处理程序中调用:
一个二个一个一个
这就引出了下一步:如果你想添加send to / box 3,重复同样的代码,把代码写成数据驱动的:
现在,当需要添加另一个框时,您只需添加:
并且不进行任何代码更改。
在本例中,即使您从未添加第三个框,代码仍然更加简洁。