当我点击元素A时，我想改变元素B的文本

When I click Element A, I want to change text of Element B

本文关键字：元素 改变 文本      更新时间：2023-09-26

这个想法是，当我点击h1。问题，h1中的字符串。答案将更改为h1中的字符串。问题是data-text-swap。例如，如果我点击"What is wrong with you?"，我应该会在h1.answer看到答案"Nothing"。

我试过使用。text()，但我认为这不是正确的答案，因为我计划放10个问题，写10次。text()有点荒谬。

帮助!

更新:哇!非常感谢你的回答!这里所有的答案都非常迅速和容易理解。今晚我要再看一遍。非常感谢!!

<h1 class="answerswer">Answer here</h1></div>
<h1 class="question" data-text-swap="Nothing">What is wrong with you?</h1>
<h1 class="question" data-text-swap="Good!">How is the weather today?</h1>
<h1 class="question" data-text-swap="Everything">What is wrong with him?</h1>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$("h1.question").click(ontop);
   function ontop() {
   $("h1.answer").text(("h1.question").data("text-swap"));
 }
 </script>

两个问题:

  1. 您缺少$("h1.question").data(...)
    2. 中的$
  2. 在同一行中，使用$(this)而不是$("h1.question")来获取点击项目的文本

即修改:

$("h1.answer").text(("h1.question").data("text-swap"));

: 

$("h1.answer").text($(this).data("text-swap"));
在上下文:

$("h1.question").click(ontop);
function ontop() {
    $("h1.answer").text($(this).data("text-swap"));
}
<h1 class="answerswer">Answer here</h1></div>
<h1 class="question" data-text-swap="Nothing">What is wrong with you?</h1>
<h1 class="question" data-text-swap="Good!">How is the weather today?</h1>
<h1 class="question" data-text-swap="Everything">What is wrong with him?</h1>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

您将所有h1上的单击处理程序与类'question'绑定，因此，如果您只是动态引用已单击的元素，您最终将使用(几乎)一行代码:

$('h1.question').on('click', function() {
    $('h1.answer').text($(this).attr('data-text-swap'));
});

不需要写10次text()…

假设始终只有一个'answer'元素。如果每个问题都有一个'answer'元素，则应该从$(this) obj遍历到它。

正如@AndrewL指出的，你在这里缺少一个$:

$("h1.answer").text(("h1.question").data("text-swap"));
                    ^

但是，您也可以使用this来代替从h1.question获取数据。

$("h1.answer").text($(this).data("text-swap"));
相关文章：