一次jQuery多个动作

Question

I'm trying to make some sense with jQuery, but since I never worked with javascript I'm having a bit of trouble.

Basically what am I trying to do.

I have this bit of code:

<div>    
  <a href="#"> Text 1 </a>
</div>
<div class="col-sm-5">
  <span class="text show" style="display: none">sometext</span>
  <img src="someimage.png">
</div>

and I would like to change it to the following:

<div>    
  <a href="#"> Text 1 CHANGED</a>
</div>
<div class="col-sm-5">
  <span class="text show">sometext</span>
  <img src="someimage.png" style="display: none>
</div>

after clicking on link with "text 1".

List of changes: Change link text switch image for text and the other way

Every time I click the link it is supposed to switch to the other variation, back and forward.

I have already tried some sollutions I found, mainly javascripts, but since I never worked with them I wasn't able to make it work.

http://jsfiddle.net/j999y/2362/

Answer 1

There are many ways of doing what you want to do, but the most direct is probably something like this:

$('.text').click(function() {
  $('.text.show').toggle();
  $('.image').toggle();
  $(this).text('Text 1 CHANGED');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>    
  <a href="#" class="text">Text 1</a>
</div>
<div class="col-sm-5">
  <span class="text show" style="display: none">sometext</span>
  <img class="image" src="https://lh3.googleusercontent.com/L8b2jHW8ttKu2spXcN6yUjocE_yIBG3E-bBot66cUOj_KsVCm6WcW5A-mxkKM4al6FI=w300-rw">
</div>

</div>