Javascript - 渲染输入字段文本

Question

我编写了一个函数，在 div 类中呈现所有选定的字段(席位)。当我单击它们时，它们需要按名称显示。现在，我希望将这些字段写入我单击时选择的输入字段中。

var rowRange = 'abcdefghijklmnopqrstuvwxyz'.split('');

var $cart = $('#selected-seats'),
    sc = $('#seat-map').seatCharts({
    map: [
        'aaaaa__aaaaa',
        'aaaaa__aaaaa',
        'aaaaa__aaaaa'
    ],

    naming : {
        top : false,
        getLabel : function (character, row, column) {
            return rowRange[row - 1].toUpperCase() + column;
        },
    },

    click: function () {
        if (this.status() === 'available') {
            $('<li>'+this.settings.label+'</b></li>')
                .appendTo($cart);


            $counter.text(sc.find('selected').length+1);

            return 'selected';
    });
});

这是我的表单输入字段

 <input type="text" id="selected-seats" class="form-control"  size="20">

这个示例工作正常，但我在将它与输入字段连接时遇到问题..

if (this.status() == 'available') {
            $('<li>'+this.settings.label+'</b></li>')
                .appendTo($cart);

这不..

if (this.status() == 'available') {
            document.getElementById('selected-seats')
                .appendTo($cart);

Answer 1

document.getElementById('selected-seats')

上面的行返回一个纯 DOM 元素，没有被任何 jQuery 对象包装。 DOM 元素没有 appendTo 方法 - 但 jQuery 对象却有。因此，您需要做的是使用 jQuery 通过 ID 获取元素(下面的第一个示例)，或者使用它来包装 native getElementById 方法的结果(下面的第二个示例)。

// First example
$('#selected-seats').appendTo($cart)

// Second example
var selectedSeatsElement = document.getElementById('selected-seats');
$(selectedSeatsElement).appendTo($cart)