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”的链接后。

更改列表： 更改链接文本 将图像切换为文本和其他方式

每次我点击链接时，它都应该切换到另一个变体，前后切换。

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

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>