javascript - 单击按钮时将 更改为输入值

Question

我有这个代码HTML

    <h2 class="p1">Player 1</h2>
    <input type="text" class="addName1" value="Player 1"></input><button class="addName1b">Add name</button>

查询

$('.addName1b').click(function() {
    var $this = $(this);
    $this.toggleClass('addName1b');
    if ($this.hasClass('addName1b')) {
        $this.text('Add name');
    } else {
        $this.text('Change name');
    }
    $('.addName1').toggle();
    $(/*TEXT FROM INPUT*/).appendTo(".p1");
});

我希望播放器 1 在我按下按钮时变为输入框中的文本，但不知道如何操作。请帮助 :)如您所见，我正计划使用 .appendTo，但我不知道如何从输入元素访问文本。

谢谢

Answer 1

使用这行代码

 $('.p1').text($('.addName1').val());

在你有 $(/*TEXT FROM INPUT*/).appendTo(".p1");

的地方

appendTo 不是您的目标的正确选择，appendTo 用于将元素追加到另一个元素中，但您的要求是更改元素的文本，您必须使用 .text()

这是一个工作片段。

$('.addName1b').click(function() {
    var $this = $(this);
    $this.toggleClass('addName1b');
    if ($this.hasClass('addName1b')) {
        $this.text('Add name');
    } else {
        $this.text('Change name');
    }
    $('.addName1').toggle();
    $('.p1').text($('.addName1').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="p1">Player 1</h2>
    <input type="text" class="addName1" value="Player 1"></input><button class="addName1b">Add name</button>