Question

我是JQuery的新手，因为我主要是后端。所以我有一个这样的表：

<tr>
<td>
    <div class="div-package-service"><a style="cursor: pointer" id="service_"+id+" class="package-service"> Service Name </a></div>                
    <span><br>ANYTIME</span>
    <div><br><a style="cursor: pointer" class="remove-button">Remove></a></div>
</td>

行生成是循环的，因此服务id中的id变量。现在我试图隐藏“div-package-service”，我正在使用这个jQuery代码：

   var hideSchedule = {  
   removeServiceSchedule: function (span) {
        $(span).siblings().find('div').hide();
    }
}

$(document).on('click', '.remove-button', function (e) {
    e.preventDefault();
    hideSchedule.removeServiceSchedule(this);
});

我尝试了各种方法，但我仍然没有得到它。我可以在我的系统的其他部分上做，但我不能在这里做。感谢帮助！

Answer 1

有几件事：

，元素的id未正确生成。应该是这样的：id="service_"+id
您已经在.package-service-remove上写了一个触发器，并且html中没有这样的类（至少不在发布的那个类中）。
如果您想要remove-button删除服务名称，则删除按钮位于div中，因此它没有服务名称div作为其兄弟。其父级将服务名称div作为兄弟，请注意：$(span).parent().siblings('div')在以下代码中

var hideSchedule = {  
   removeServiceSchedule: function (span) {
        $(span).parent().siblings('div').hide();
    }
}

$(document).on('click', '.remove-button', function (e) {
    e.preventDefault();
    hideSchedule.removeServiceSchedule(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>
    <div class="div-package-service"><a style="cursor: pointer" id="service_1" class="package-service"> Service Name </a></div>     
    <span><br>ANYTIME</span>
    <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div>
</td>
</tr>
<tr>
<td>
    <div class="div-package-service"><a style="cursor: pointer" id="service_2" class="package-service"> Service Name </a></div>                
    <span><br>ANYTIME</span>
    <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div>
</td>
</tr>
</table>

以下代码删除（隐藏）整行）

var hideSchedule = {
  removeServiceSchedule: function(span) {
    $(span).parents("tr").hide();
  }
}

$(document).on('click', '.remove-button', function(e) {
  e.preventDefault();
  hideSchedule.removeServiceSchedule(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>
      <div class="div-package-service"><a style="cursor: pointer" id="service_1" class="package-service"> Service Name 1</a></div>
      <span><br>ANYTIME</span>
      <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="div-package-service"><a style="cursor: pointer" id="service_2" class="package-service"> Service Name 2</a></div>
      <span><br>ANYTIME</span>
      <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="div-package-service"><a style="cursor: pointer" id="service_3" class="package-service"> Service Name 3</a></div>
      <span><br>ANYTIME</span>
      <div><br><a style="cursor: pointer" class="remove-button">Remove</a></div>
    </td>
  </tr>
</table>

如何在JQuery中隐藏相同级别的分区？

1 个答案: