Блог

Идея заключается в том, что когда я нажимаю на h1.question , строка в h1.answer изменится на строку в data-text-swap h1.question. Например, если я нажму «Что с тобой не так?», я должен увидеть ответ «Ничего» в 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>
  

Две проблемы:

1. Вам не хватает $ from $("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>  

вы привязываете обработчик кликов ко всему h1 с классом ‘question’, поэтому, если вы просто ссылаетесь на выбранный элемент динамически, вы получаете (почти) однострочный:

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

нет необходимости писать text() 10 раз…

это предполагает, что у вас всегда есть ровно один элемент ‘answer’. если у вас есть элемент ‘answer’ для каждого вопроса, вы должны перейти к нему из объекта $(this).

Как указал @AndrewL, здесь отсутствует a $ :

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

Но вы также можете просто использовать this вместо этого для получения данных h1.question .

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