如何选择单击按钮以更改其类别

Question

我想隐藏两个按钮，并在单击编辑按钮时显示另一个按钮，但是问题是当我单击编辑按钮时，表上的所有按钮都对此事件做出反应。

我使用$（this）选择被单击的按钮，但是它仅适用于编辑按钮，而其他按钮不遵循此规则。

$(document).on('click', ".cat-edit-btn", function() {
  $(this).toggleClass("d-inline d-none");
  $(this).parent().parent().parent().find("tr").find(".cat-delete-btn").toggleClass("d-inline d-none");
  $(this).parent().find($(".cat-sub-btn").toggleClass("d-inline d-none"));
  $(this).parent().find($(".cat-cancell-btn").toggleClass("d-inline d-none"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered bg-info table-striped text-center" style="direction:rtl; text-align:right !important;">
  <thead style="font-size: 16px">
    <tr style="color: white; background-color: darkcyan">
      <th>#</th>
      <th>پیش نمایش</th>
      <th>نام کاتالوگ</th>
      <th>دسته بندی</th>
      <th>زبان</th>
      <th>تاریخ انتشار</th>
      <th>توضیحات</th>
      <th colspan="3">مدیریت</th>
    </tr>
  </thead>
  <tbody style="font-size: 15px">

    <tr>
      <td>پیش نمایش</td>
      <td>@item.CATALOG_TITLE</td>
      <td>@item.CATALOG_CATEGORY</td>
      <td>@item.CATALOG_CATEGORY</td>
      <td>
        <span>انگلیسی</span>
      </td>
      <td>@item.CATALOG_DATE</td>
      <td>@item.CATALOG_DESC</td>
      <td>

        <button type="button" class="btn btn-warning ml-1 cat-edit-btn d-inline">ویرایش</button>
        <button type="button" class="d-none btn btn-success ml-1 cat-sub-btn ">ثبت</button>
        <button type="button" class="d-none btn btn-info ml-1 cat-cancell-btn">انصراف</button>
        <button type="button" class="btn btn-danger cat-delete-btn d-inline">حذف</button>
        <input class="d-none" id="category_id" value="@item.CATALOG_ID" />

      </td>



    </tr>
    <tr>
      <td>پیش نمایش</td>
      <td>@item.CATALOG_TITLE</td>
      <td>@item.CATALOG_CATEGORY</td>
      <td>@item.CATALOG_CATEGORY</td>
      <td>

        <span>فارسی</span>
      </td>
      <td>@item.CATALOG_DATE</td>
      <td>@item.CATALOG_DESC</td>
      <td>

        <button type="button" class="btn btn-warning ml-1 cat-edit-btn d-inline">ویرایش</button>
        <button type="button" class="d-none btn btn-success ml-1 cat-sub-btn ">ثبت</button>
        <button type="button" class="d-none btn btn-info ml-1 cat-cancell-btn">انصراف</button>
        <button type="button" class="btn btn-danger cat-delete-btn d-inline">حذف</button>
        <input class="d-none" id="category_id" value="@item.CATALOG_ID" />

      </td>



    </tr>

  </tbody>

</table>

Answer 1

那是因为您使用错误的选择器来定位相对元素。您需要遍历到最接近的行元素，然后在其中找到目标元素：

 var $closestRow = $(this).closest('tr')
 $closestRow.find(".cat-delete-btn,.cat-sub-btn,.cat-cancell-btn").toggleClass("d-inline d-none);

Answer 2

您可以使用它并缩短代码：

$(this).closest("td").find(".cat-delete-btn,.cat-sub-btn,.cat-cancell-btn").toggleClass("d-inline d-none");

请注意，在某些.find方法中，您拥有$(，就像在.find($(".cat-sub-btn")中一样。无需在$()内使用.find()

.parent().parent().parent().find("tr")中的逻辑也意味着您转到tbody，然后搜索所有tr，也就是为什么它会影响所有按钮。

演示

$(document).on('click', ".cat-edit-btn", function() {

  //$(this).toggleClass("d-inline d-none");

  $(this).closest("td").find(".cat-delete-btn,.cat-sub-btn,.cat-cancell-btn").toggleClass("d-inline d-none");

});

.d-none{
display:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered bg-info table-striped text-center" style="direction:rtl; text-align:right !important;">
  <thead style="font-size: 16px">
    <tr style="color: white; background-color: darkcyan">
      <th>#</th>
      <th>پیش نمایش</th>
      <th>نام کاتالوگ</th>
      <th>دسته بندی</th>
      <th>زبان</th>
      <th>تاریخ انتشار</th>
      <th>توضیحات</th>
      <th colspan="3">مدیریت</th>
    </tr>
  </thead>
  <tbody style="font-size: 15px">

    
    <tr>
      <td>پیش نمایش</td>
      <td>TITLE</td>
      <td>CATEGORY</td>
      <td>_CATEGORY</td>
      <td>

        <span>فارسی</span> 

      </td>
      <td>CATALOG_DATE</td>
      <td>CATALOG_DESC</td>
      <td>

        <button type="button" class="btn btn-warning ml-1 cat-edit-btn d-inline">ویرایش</button>
        <button type="button" class="d-none btn btn-success ml-1 cat-sub-btn ">ثبت</button>
        <button type="button" class="d-none btn btn-info ml-1 cat-cancell-btn">انصراف</button>
        <button type="button" class="btn btn-danger cat-delete-btn d-inline">حذف</button>
        <input class="d-none" id="category_id" value="@item.CATALOG_ID" />

      </td>



    </tr>
    <tr>
      <td>پیش نمایش</td>
      <td>TITLE</td>
      <td>CATEGORY</td>
      <td>_CATEGORY</td>
      <td>

        <span>فارسی</span> 

      </td>
      <td>CATALOG_DATE</td>
      <td>CATALOG_DESC</td>
      <td>

        <button type="button" class="btn btn-warning ml-1 cat-edit-btn d-inline">ویرایش</button>
        <button type="button" class="d-none btn btn-success ml-1 cat-sub-btn ">ثبت</button>
        <button type="button" class="d-none btn btn-info ml-1 cat-cancell-btn">انصراف</button>
        <button type="button" class="btn btn-danger cat-delete-btn d-inline">حذف</button>
        <input class="d-none" id="category_id" value="@item.CATALOG_ID" />

      </td>



    </tr>

  </tbody>

</table>

Answer 3

您的主要问题是在$命令中使用jquery选择器.find，您不需要这样做-即

$(this).parent().find($(".cat-sub-btn").toggleClass("d-inline d-none"));

应该是：

$(this).parent().find(".cat-sub-btn").toggleClass("d-inline d-none");

您可以大大简化您的jquery代码。我已经更改了您的“取消”按钮的类，因为看起来好像有错字.cat-cancell-btn-> .cat-cancel-btn。

---

推荐的解决方案

下面的代码有些不同，因为它假定应该全部切换按钮（在尝试当前代码时）。您可以使用.closest("td")查找最近的单元格（即包含所有按钮的单元格），然后使用.find("btn")查找所有按钮，然后使用.toggleClass("d-none")

切换每个按钮的类别

---

演示

$(document).on('click', ".cat-edit-btn, .cat-cancel-btn", function() {

  $(this).closest("td").find(".btn").toggleClass("d-none");

});

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered bg-info table-striped text-center" style="direction:rtl; text-align:right !important;">
  <thead style="font-size: 16px">
    <tr style="color: white; background-color: darkcyan">
      <th>#</th>
      <th>پیش نمایش</th>
      <th>نام کاتالوگ</th>
      <th>دسته بندی</th>
      <th>زبان</th>
      <th>تاریخ انتشار</th>
      <th>توضیحات</th>
      <th colspan="3">مدیریت</th>
    </tr>
  </thead>
  <tbody style="font-size: 15px">


    <tr>
      <td>پیش نمایش</td>
      <td>@item.CATALOG_TITLE</td>
      <td>@item.CATALOG_CATEGORY</td>
      <td>@item.CATALOG_CATEGORY</td>
      <td>

        <span>فارسی</span>

        <span>انگلیسی</span>

      </td>
      <td>@item.CATALOG_DATE</td>
      <td>@item.CATALOG_DESC</td>
      <td>

        <button type="button" class="btn btn-warning ml-1 cat-edit-btn d-inline">Edit</button>
        <button type="button" class="d-none btn btn-success ml-1 cat-sub-btn ">Sub</button>
        <button type="button" class="d-none btn btn-info ml-1 cat-cancel-btn">Cancel</button>
        <button type="button" class="btn btn-danger cat-delete-btn d-inline">Delete</button>
        <input class="d-none" id="category_id" value="@item.CATALOG_ID" />

      </td>



    </tr>


    <tr>
      <td>پیش نمایش</td>
      <td>@item.CATALOG_TITLE</td>
      <td>@item.CATALOG_CATEGORY</td>
      <td>@item.CATALOG_CATEGORY</td>
      <td>

        <span>فارسی</span>

        <span>انگلیسی</span>

      </td>
      <td>@item.CATALOG_DATE</td>
      <td>@item.CATALOG_DESC</td>
      <td>

        <button type="button" class="btn btn-warning ml-1 cat-edit-btn d-inline">Edit</button>
        <button type="button" class="d-none btn btn-success ml-1 cat-sub-btn ">Sub</button>
        <button type="button" class="d-none btn btn-info ml-1 cat-cancel-btn">Cancel</button>
        <button type="button" class="btn btn-danger cat-delete-btn d-inline">Delete</button>
        <input class="d-none" id="category_id" value="@item.CATALOG_ID" />

      </td>



    </tr>

  </tbody>

</table>