javascript - 隐藏和显示内容以及单击时更改图像的问题

Question

我正在尝试隐藏和显示一些内容并且它正在工作，但是当我必须将内容隐藏回其正常状态时，我无法使按钮图像从减号变为加号。

阿努的建议？这是我的代码，直到这一刻。

$(document).ready(function() {
    $('#show-content img').click(function() {
        $('.hidden-content').slideToggle("fast");
        $('.default-plus').attr('src','https://s11.postimg.org/7w0jbixvz/hide_content.jpg');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="show-content">
  <img src="https://s11.postimg.org/40x58yeq7/show_content.jpg" width="66" height="66" title="someText" alt="someText" class="default-plus">
  <h3>How to Sign-In on the Device</h3>
  <p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>

谢谢你们，但是如果我有几个相同的 div，并且我想按此按钮来显示和隐藏内容，那么所有其他相同的 div 将打开和关闭它们的内容。我怎样才能隔离他们？

Answer 1

使用 2 个带有背景图片的类:

 $('.default').toggleClass('plus minus')

更新

OP 要求多个按钮独立运行。使用关键字 this 和 .parent() 和 .next() 来定位 .hidden-content

$(document).ready(function() {
  $('.show-content button').click(function() {
$(this).parent().next('.hidden-content').slideToggle("fast");
$(this).toggleClass('plus minus')
  });
});

.default {
  width: 66px;
  height: 66px;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  border: 0 none transparent;
}
button:focus {
  outline: 0;
}
.plus {
  background: url(https://s11.postimg.org/40x58yeq7/show_content.jpg)no-repeat;
  background-size: contain;
  background-color: transparent;
}
.minus {
  background: url(https://s11.postimg.org/7w0jbixvz/hide_content.jpg)no-repeat;
  background-size: contain;
  background-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="show-content">
  <button title="someText" class="default plus"></button>
  <h3>How to Sign-In on the Device</h3>
  <p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>
<div class="show-content">
  <button title="someText" class="default plus"></button>
  <h3>How to Sign-In on the Device</h3>
  <p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>
<div class="show-content">
  <button title="someText" class="default plus"></button>
  <h3>How to Sign-In on the Device</h3>
  <p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>
<div class="show-content">
  <button title="someText" class="default plus"></button>
  <h3>How to Sign-In on the Device</h3>
  <p>This is a subtext, if needed</p>
</div>
<div class="hidden-content" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nisi maxime, sapiente iste nostrum assumenda, deserunt. Repellendus commodi labore eligendi, ipsum inventore reiciendis. Ipsum voluptatum cumque consequuntur error id quidem.</p>
</div>