当我点击元素A，我想改变元件B

Question

的文本的想法是，当我点击h1.question，在h1.answer字符串将变为字符串中h1.question的数据文本交换。例如，如果我点击“你有什么问题？”，我应该在h1.answer处看到“Nothing”的答案。

我使用的.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

两个问题：

1. 你缺少$从$("h1.question").data(...)
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="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>

Answer 2

你要绑定的所有H1与类的问题“单击处理程序，所以如果你只是引用点击的元素动态的，你结束了一个（几乎）的一行：

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

不需要写文本（）的10倍......

这个假定你总是有一个确切的回答'元素。如果每个问题有“答案”元素，则应该从$（this）obj遍历它。

Answer 3

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

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

但是，你也可以使用this而不是从h1.question获取数据。

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