javascript - 单击当前行以在 jQuery 中展开详细信息

Question

我想单击特定行以使用一些数据扩展该行。我尝试使用 this jQuery，但它不起作用。

任何人都可以帮忙，我错过了什么。

jQuery

这工作正常，但我想处理当前行

$('.item-id-expand').click(function(){
  $('.item-id-close').css("display", "inline-block");
  $('.item-id-expand').hide();
  $('.order-details-row1-details').show();
});
$('.item-id-close').click(function(){
  $('.item-id-close').hide();
  $('.item-id-expand').show();
  $('.order-details-row1-details').hide();
});

我在这里尝试使用这个，但它不起作用

$('.item-id-expand', this).click(function(){
  $(this).find('.item-id-close').css("display", "inline-block");
  $(this).find('.item-id-expand').hide();
  $(this).find('.order-details-row1-details').show();
});
$('.item-id-close').click(function(){
  $(this).find('.item-id-close').hide();
  $(this).find('.item-id-expand').show();
  $(this).find('.order-details-row1-details').hide();
});

HTML

<div class="order-details">
  <ul class="order-details-head">
    <li>Item ID</li>
    <li>Name</li>
    <li>Qty</li>
    <li>Status</li>
  </ul>
  <ul class="order-details-row1">
    <li><div class="item-id-expand">+</div><div class="item-id-close">-</div>123456</li>
    <li>php 11 echo </li>
    <li>php 12 echo </li>
    <li>php 13 echo </li>
  </ul>
  <div class="order-details-row1-details">
    <ul class="order-details-row1-details-head">
      <li>Date</li>
      <li>Description</li>
    </ul>
    <ul class="order-details-row1-details1">
      <li> echo datetrack</li>
      <li>php echo </li>
    </ul>
  </div>
  <ul class="order-details-row1">
    <li><div class="item-id-expand">+</div><div class="item-id-close">-</div>654321</li>
    <li>php 21 echo </li>
    <li>php 22 echo </li>
    <li>php 23 echo </li>
  </ul>
  <div class="order-details-row1-details">
    <ul class="order-details-row1-details-head">
      <li>Date</li>
      <li>Description</li>
    </ul>
    <ul class="order-details-row1-details1">
      <li> echo datetrack</li>
      <li>php echo </li>
    </ul>
  </div>
</div>

Answer 1

像下面那样做(在函数内部使用 $(this)):-

$('.item-id-expand').click(function() {
  $(this).siblings('.item-id-close').css("display", "inline-block");
  $(this).hide();
  $(this).closest('.order-details-row1').next('.order-details-row1-details').show();
});
$('.item-id-close').click(function() {
  $(this).hide();
  $(this).closest('.order-details-row1').find('.item-id-expand').show();
  $(this).closest('.order-details-row1').next('.order-details-row1-details').hide();
});

工作 jsfiddle:- https://jsfiddle.net/wfjv2mhg/