captinmajid captinmajid - 1 month ago 8
Javascript Question

How to accomplish this with jquery?

I need to know how will you do something like the following:

When you click "list 2" the "text 2" appears in the paragraph with a class of message. And when click "text 3", the "text 3" appears instead and so on.

Its challenging because you don't show the actual list text but another text from other place! Any thoughts on this? Thank you so much for helping me : )

<p class="message"></p>

<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>

<p>text 1</p>
<p>text 2</p>
<p>text 3</p>

Answer

Do you mean this ?

var paragraphs = $('p').not('.message');

$('li').on('click', function(e) {
  var i = $(e.target).index();
  $('.message').html($(paragraphs[i]).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="message"></p>

<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>

<p>text 1</p>
<p>text 2</p>
<p>text 3</p>