Question

我的想法是，当我点击h1.question时，h1.answer中的字符串将更改为h1.question的数据文本交换中的字符串。例如，如果我点击＆＃34;你有什么问题？＆＃34;，我应该看到答案＆＃34;没什么＆＃34;在h1.answer。

我尝试过使用.text（），但我认为这不是正确的答案，因为我打算提出10个问题并写下.text（）10次是有点荒谬的。

帮助！

更新：哇！非常感谢你的答案！这里的所有答案都非常迅速且易于理解。我今晚要再看一遍他们。非常感谢!!

<h1 class="answer">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>

Answer 1

你正在使用类'question'绑定所有h1上的click处理程序，所以如果你只是动态地引用被点击的元素，你最终得到一个（几乎）单行：

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

无需写文本（）10次......

这假设你总是只有一个'回答'元素。如果每个问题都有一个'answer'元素，你应该从$（this）obj遍历它。

Answer 2

两个问题：

您遗漏了$

$("h1.question").data(...)

在同一行中，要获取所点击项目的文字，请使用$(this)代替$("h1.question")

即改变：

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

要：

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

在上下文中：

＆＃13;

$("h1.question").click(ontop);
function ontop() {
    $("h1.answer").text($(this).data("text-swap"));
}

＆＃13;

<h1 class="answer">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>

＆＃13;

Answer 3

正如@AndrewL指出的那样，你在这里错过了$：

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

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

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

单击元素A时，我想更改元素B的文本

3 个答案: