javascript - 如何限制表图标更新为仅在 jquery 中单击的图标？

Question

当我单击 html 表格上的展开图标时，单击的父项会展开，但两个父项图标都会切换。如何防止两个父图标都被切换，并且只有单击的父图标被切换？请引用我下面的代码片段。谢谢

这是我的代码和演示:

$('td').addClass("clickh");
$('.hideme').find('div').hide();
$('.clickh').click(function() {
  var img = $(".center img");
  if (img.attr('src') == 'http://www.stemcor.com/images/plus.gif') {
    // row expanded, so collapse...
    img.attr('src', 'http://www.stemcor.com/images/minus.gif');
  } else {
    // row collapsed, so expand...
    img.attr('src', 'http://www.stemcor.com/images/plus.gif')
  }
  $(this).parent().next('.hideme').find('div').slideToggle(500);
});

table {
  width: auto;
  border: 1px solid #aaa;
  margin-bottom: 15px;
  border-collapse: collapse;
}
th,
td {
  width: auto;
  border: 1px solid #aaa;
  padding: 10px;
}
caption {
  color: #222;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="adv-table">
  <table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered" id="hidden-table-info">
    <thead>
      <tr>
        <th>expand</th>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
        <th>col 4</th>
        <th>col 5</th>
        <th>col 6</th>
        <th>col 7</th>
        <th>col 8</th>
        <th>col 9</th>
      </tr>
    </thead>
    <tbody>
      <tr class="gradeA">
        <td class="center">
          <img src="http://www.stemcor.com/images/plus.gif" />
        </td>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
        <td>item 5</td>
        <td>item 6</td>
        <td>item 7</td>
        <td>item 8</td>
        <td>Edit</td>
      </tr>
      <tr class="hideme">
        <td colspan="10">
          <div>
            Sample te1t, sample text, sample text, sample text, sample text, sample text
          </div>
        </td>
      </tr>
      <tr class="gradeA">
        <td class="center">
          <img src="http://www.stemcor.com/images/plus.gif" />
        </td>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
        <td>item 5</td>
        <td>item 6</td>
        <td>item 7</td>
        <td>item 8</td>
        <td>Edit</td>
      </tr>
      <tr class="hideme">
        <td colspan="10">
          <div>
            Sample te1t, sample text, sample text, sample text, sample text, sample text
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

只需使用

var img = $(this).children(".center img");

您点击的项目包含 img:

$('td').addClass("clickh");
$('.hideme').find('div').hide();
$('.clickh').click(function() {
  var img = $(this).children(".center img");
  if (img.attr('src') == 'http://www.stemcor.com/images/plus.gif') {
    // row expanded, so collapse...
    img.attr('src', 'http://www.stemcor.com/images/minus.gif');
  } else {
    // row collapsed, so expand...
    img.attr('src', 'http://www.stemcor.com/images/plus.gif')
  }
  $(this).parent().next('.hideme').find('div').slideToggle(500);
});

table {
  width: auto;
  border: 1px solid #aaa;
  margin-bottom: 15px;
  border-collapse: collapse;
}
th,
td {
  width: auto;
  border: 1px solid #aaa;
  padding: 10px;
}
caption {
  color: #222;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="adv-table">
  <table cellpadding="0" cellspacing="0" border="0" class="display table table-bordered" id="hidden-table-info">
    <thead>
      <tr>
        <th>expand</th>
        <th>col 1</th>
        <th>col 2</th>
        <th>col 3</th>
        <th>col 4</th>
        <th>col 5</th>
        <th>col 6</th>
        <th>col 7</th>
        <th>col 8</th>
        <th>col 9</th>
      </tr>
    </thead>
    <tbody>
      <tr class="gradeA">
        <td class="center">
          <img src="http://www.stemcor.com/images/plus.gif" />
        </td>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
        <td>item 5</td>
        <td>item 6</td>
        <td>item 7</td>
        <td>item 8</td>
        <td>Edit</td>
      </tr>
      <tr class="hideme">
        <td colspan="10">
          <div>
            Sample te1t, sample text, sample text, sample text, sample text, sample text
          </div>
        </td>
      </tr>
      <tr class="gradeA">
        <td class="center">
          <img src="http://www.stemcor.com/images/plus.gif" />
        </td>
        <td>item 1</td>
        <td>item 2</td>
        <td>item 3</td>
        <td>item 4</td>
        <td>item 5</td>
        <td>item 6</td>
        <td>item 7</td>
        <td>item 8</td>
        <td>Edit</td>
      </tr>
      <tr class="hideme">
        <td colspan="10">
          <div>
            Sample te1t, sample text, sample text, sample text, sample text, sample text
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>