Question

我有以下问题：

我需要追加一个值为的字段，但JavaScript无法识别或读取输入字段内的值。

jQuery＆＃34; on＆＃34;方法无法识别字段内的值。

我该如何解决这个问题。单击列表项应附加到输入字段内的值。

JS：

$(function(){

$(document).on("click", ".tagSelect a", function(){
    // input field containing values
    if($("input[name='tags']").html() != "")
        tags = $("input[name='tags']").html() + ",";
    else
        tags = "";

    // add new value
    $("input[name='tags']").val(tags + $(this).attr("data"));
});


});

HTML：

<input type="text" class="form-control" name="tags" placeholder="tags" value="" />

<ul id="tagSelect" class="tagSelect">
<li class="row">
    <a class="anchorList back-history-counter" data="monkey">
        <p>monkey</p>
    </a>
</li>
<li class="row">
    <a class="anchorList back-history-counter" data="elephant">
        <p>elephant</p>
    </a>
</li>
<li class="row">
    <a class="anchorList back-history-counter" data="lion">
        <p>lion</p>
    </a>
</li>
</ul>

Answer 1

使用val（）方法代替html（）：

$(function(){

$(document).on("click", ".tagSelect a", function(){
    // input field containing values
    if($("input[name='tags']").val() != "")
        tags = $("input[name='tags']").val() + ",";
    else
        tags = "";

    // add new value
    $("input[name='tags']").val(tags + $(this).attr("data"));
});


});

Answer 2

这是一个稍微修改过的版本，它将标记放入数组中，以便在开始删除标记时不会留下尾随逗号

var tagDelimiter = ', ';
$(document).on("click", ".tagSelect a", function () {
    var $tagInput = $("input[name='tags']"),
        newTag = $(this).attr("data"),
        tagVal = $tagInput.val(),
        tagsArr = tagVal ? tagVal.split(tagDelimiter) : [];

    tagsArr.push(newTag);
    $tagInput.val(tagsArr.join(tagDelimiter));
});

的 DEMO

Answer 3

好吧，所以有一些事情，这主要是为了帮助良好实践，而不仅仅是解决答案（因为@BhojendraNepal做得很好）。让我们从最终代码开始：

var $tagsInput = $('input').filter('[name="tags"]');

$('.tagSelect').on({
    click:function(){
        var data = $(this).attr('data'),
            tags;

        if($tagsInput.val()){
            tags = $tagsInput.val() + ',';
        } else {
            tags = '';
        }

        $tagsInput.trigger('tagChange',[tags,data]);
    }
},'a');

$tagsInput.on({
    tagChange:function(e,tags,data){
        $tagsInput.val(tags + data);
    }
});

有几点需要注意：

您多次引用的项目已缓存
.on('click')使用最近的父级作为委派驱动程序，而不是document
input值的更改已修改为在其自己的事件结构中进行，而不是在click事件中

你为什么要这么做？

如果您多次引用某些内容，则应该缓存它，因为jQuery否则需要重新查询DOM。查询DOM是JavaScript中最费力的部分，因此最小化这一点是高性能JavaScript的关键。

使用事件委派有很多原因，但是你使用顶级document委派是性能最差的方法（即使jQuery文档说它们在{{{{ 3}}）。理想情况是尽可能使用距离最近的父级，幸运的是，您已在.tagSelect类中识别出一个。使用它作为您的授权驱动程序将提供相同的好处，但更好的性能。

value更改的隔离有点抽象，但有助于理解您是否计划将此应用程序变大。也许你会想要其他东西在未来引起价值变化，或者你的点击功能会变得庞大，谁知道呢。通过将点击功能（设置tags的值）与其影响input（更改value）的方式分开，您将创建一种由关注点分隔的更具可扩展性的代码方法。我相信我会得到一些人说“这对于这种规模的应用并不重要”，但它是一种熟悉的好方法，因为它可以在将来节省许多麻烦。

只是我的两分钱。如上所述，@ BhojendraNepal的答案很好，因为您的问题是使用.html()而不是.val()，只是提供了一些额外的信息。

使用JavaScript更改后，jQuery获取输入值

3 个答案: