javascript - jQuery 一次执行多个操作

Question

我试图理解 jQuery，但由于我从未使用过 javascript，所以遇到了一些麻烦。

基本上我想做什么。

我有这段代码:

<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>

我想将其更改为以下内容:

<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>

点击“text 1”链接后。

变更列表: 更改链接文本 将图像切换为文本，或者以其他方式切换图像

每次我单击链接时，它都应该切换到其他变体，后退和前进。

我已经尝试过一些我发现的解决方案，主要是 JavaScript，但由于我从未使用过它们，所以无法使其工作。

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

Answer 1

有很多方法可以做你想做的事情，但最直接的可能是这样的:

$('.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>