如何切换输入值？

Question

如何更新这个jQuery代码，每个链接可以添加\只将其文本删除到输入？

$("a").click(function (e) { 
e.preventDefault();
var elem = $("input[name$='what']");
var text = $(this).text();
if (elem.val()) {
    elem.val("");
} else {
    elem.val( elem.val() + " " + text );
}
});

JSFIDDLE

  <form>
  <p>name*</p>
  <input class="name" type="text" name="name">
  <p>phone*</p>
  <input class="phone" type="text" name="phone">
  <p>services</p>
  <input class="what" type="text" name="what">
  <input class="send" type="submit" name="send" value="send">
  </form>

Answer 1

您需要跟踪选择的服务。有很多方法可以做到这一点。这是两个：

使用a元素

上的类

为每个service元素添加a类，然后：

$("a").click(function (e) { 
    e.preventDefault();
    var elem = $("input[name$='what']");
    $(this).toggleClass("selected");
    elem.val(
        $("a.service.selected").map(function() {
            return $(this).text();
        }).get().join(" ")
    );
});

Updated Fiddle

请注意，此方法将始终按文档框中的a元素出现在文档中的顺序（而不是用户单击它们的顺序）。哪个可能是你想要的，也可能不是。

使用数组

var selectedServices = [];
$("a").click(function (e) { 
    e.preventDefault();
    var elem = $("input[name$='what']");
    var service = $(this).text();
    var index = $.inArray(service, selectedServices);
    if (index === -1) {
        // Not in the array: add it
        selectedServices.push(service);
    } else {
        // In the array: remove it
        selectedServices.splice(index, 1);
    }
    elem.val(selectedServices.join(" "));
});

Updated Fiddle

请注意，此方法将始终按照用户单击它们的顺序在文本框中显示服务。

Answer 2

工作的JSFIDDLE：JSFIDDLE

在每次点击之前，始终将值设置为“”。

$("a").click(function (e) { 
e.preventDefault();
var elem = $("input[name$='what']");
var text = $(this).text();
    elem.val(""); // set value to ""
    elem.val( elem.val() + " " + text );
});