改变<p>单击按钮时输入值

change <p> to input value when click button

本文关键字：输入 按钮 gt lt 改变 单击      更新时间：2024-04-23

我有这段代码HTML

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

Jquery

$('.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");
});

当我按下按钮时，我想让Player1变成输入框中的文本，但不知道怎么做。请帮忙：）正如你所看到的，我计划使用.appendTo，但我不知道如何从输入元素访问文本。

感谢

使用这行代码

 $('.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>

  • 使用变量存储新名称
  • 使用.val()从输入中获取新名称
  • 反转最后一行，因为选择器$('.p1')先行，然后值为最后一行(newName)
  • 没有括号，因为它是一个表示字符串的变量

将最后两行更改为：

 var newName = $('.addName1').val();
$(".p1").text(newName);


$(function() {
  
$('.addName1b').click(function() {
    var $this = $(this);
    $this.toggleClass('addName1b');
    if ($this.hasClass('addName1b')) {
        $this.text('Add name');
    } else {
        $this.text('Change name');
    }
    var newName = $('.addName1').val();
    $(".p1").text(newName);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<h2 class="p1">Player 1</h2>
<input type="text" class="addName1" value="Player 1" />
<button class="addName1b">Add name</button>

也许你应该使用一些框架？）像棱角分明的、击倒对手的、反应型的？非常适合这样的用途。

但是。对于读取输入值，您可以使用以下内容：

  $('#id').val();

输入不会像这个那样关闭

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

仅

<input .... />

你的JS修改

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

这是jsfiddle：https://jsfiddle.net/qgumjy7b/

希望这有助于理解你错过了什么。

相关文章：