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

How can I limit the table icon updated to only a clicked icon in jquery?

本文关键字：图标 单击 jquery 更新      更新时间：2023-09-26

当我单击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>

只需使用

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>

https://jsfiddle.net/kisspa/ooqyd6h2

$('td').addClass("clickh");
$('.hideme').find('div').hide();
$('.clickh:first-child').click(function() {
  var img = $(this).find('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);
});
相关文章：