javascript - 单击切换按钮时交换图像

Question

我有以下代码，我在其中一个服务标题中添加了一个加号。有人告诉我，当单击该服务时，我应该用一个减号代替它，以表明它可以最小化。我不确定如何在扩展描述后换掉加号。有人知道我该怎么做吗？

这是一个片段。单击其中一个服务名称以查看展开的说明。

$('.service_wrapper').click(function() {
  var thisDescription = $('.service_description', $(this));

  // Hide all other descriptions
  $('.service_description').not(thisDescription).hide();

  // Toggle (show or hide) this description
  thisDescription.slideToggle(500);
});

.service_wrapper {
  border: 1px solid black;
  margin: 15px;
  width: 20%;
}
.service_list {
  margin-left: 20%;
}
.service_title {
  padding: 15px 12px;
  margin: 0;
  font-weight: bold;
  font-size: 1em;
}
.service_title:hover {
  background-color: gray;
  color: blue;
  cursor: pointer;
}
.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%;
  margin-top: 10px;
  font-size: .9em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
  <div class="service_wrapper">
    <div class="service_title">
      <img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
    <div class="service_description">The best floors!</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Roofs</div>
    <div class="service_description">Your roof will be perfect!</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Siding</div>
    <div class="service_description">mmmm siding.</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Paint</div>
    <div class="service_description">Fabulous paint!</div>
  </div>
  <div class="service_wrapper">
    <div class="service_title">Kitchen Remodels</div>
    <div class="service_description">Pretty kitchen.</div>
  </div>
</div>

Answer 1

这是工作示例，我更改了一些 de html 和 Js

    $('.service_wrapper').click(function() {

          var thisDescription = $('.service_description', $(this));

        var t = $(this);
        if(t.hasClass('open'))
          {
            t.removeClass('open');
            t.find('.status').html("+");
          }else {
            t.addClass('open');
            t.find('.status').html("-");

          }

          // Hide all other descriptions
          $('.service_description').not(thisDescription).hide();

          // Toggle (show or hide) this description
          thisDescription.slideToggle(500);
        });

the working example