Question

我在切换课程时遇到了一些麻烦。

单击删除链接时，新的确认链接将滑入视图。如果还单击了确认链接，则应删除表格行。

如果用户点击其他地方的，但是此链接应该通过切换类delete-btn-show和delete-btn-hide来滑回视图。

希望这能澄清事情：）

下面是一个表格列表。每行都有一个垃圾桶图标，通过切换类打开div（.delete-btn）。如果delete-btn是可见的（具有类.delete-btn-show），它应该通过切换类（delete-btn-show / -hide）来隐藏自己，除非单击其中的链接。如果单击该链接，则应删除该行。我设法显示div但无法实现所需的行为。欢迎帮助：）

（jQuery在文档就绪函数中）

$('.delete-supplier-link').click(function(){
  $(this).parent().parent().find('.delete-btn').toggleClass('delete-btn-show delete-btn-hide');
});


<a class="delete-supplier-link" href="#">
  <i class="fa fa-trash"></i>
</a>

这是表结构

<table class="table table-hover" id="curr-suppliers-listing">
  <tbody>
    <tr>
      <td>
        <span class="suppl-org">
          Some organization
        </span>
        <span class="supplier-of">
          Some product or service
        </span>
        <span class="supplier-contact">
          Some dude
        </span>
      </td>
      <td class="alignR">
        <div class="delete-btn delete-btn-hide">
          <a class="delete-string" href="#">
            Delete
          </a>
        </div>
        <span>
          D.O.P.
        </span>
        <span>
          2011-11-12
        </span>
        <span>
          <a class="delete-supplier-link" href="#">
            <i class="fa fa-trash"></i>
          </a>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="suppl-org">
          Some organization
        </span>
        <span class="supplier-of">
          Some product or service
        </span>
        <span class="supplier-contact">
          Some dude
        </span>
      </td>
      <td class="alignR">
        <div class="delete-btn delete-btn-hide">
          <a class="delete-string" href="#">
            Delete
          </a>
        </div>
        <span>
          D.O.P.
        </span>
        <span>
          2011-11-12
        </span>
        <span>
          <a class="delete-supplier-link" href="#">
            <i class="fa fa-trash"></i>
          </a>
        </span>
      </td>
    </tr>
    <tr>
      <td>
        <span class="suppl-org">
          Some organization
        </span>
        <span class="supplier-of">
          Some product or service
        </span>
        <span class="supplier-contact">
          Some dude
        </span>
      </td>
      <td class="alignR">
        <div class="delete-btn delete-btn-hide">
          <a class="delete-string" href="#">
            Delete
          </a>
        </div>
        <span>
          D.O.P.
        </span>
        <span>
          2011-11-12
        </span>
        <span>
          <a class="delete-supplier-link" href="#">
            <i class="fa fa-trash"></i>
          </a>
        </span>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

我不知道我是否理解你的要求，但是，请检查这个小提琴：

http://jsfiddle.net/yp9znej8/

$(function() {
    $(document).on('click', '.delete-btn-show', function() {
        $(this).closest('tr').remove();
        // to remove the table line when clicking the button
        // using .delete-btn-show to only remove when the button is visible
    });
});

如果它不符合您的要求，您应该更改您的问题以提高可读性。

@UPDATED

看看这个小提琴：http://jsfiddle.net/L1nsanqf/3/

事情是停止事件的传播，所以它不会与其他事件发生冲突。不知道这是否是最佳方式..但是，有效，我认为这就是你想要的

Answer 2

也许您应该使用此代码：

$('.delete-btn').each(function () {
   $(this).click(function () {
    $(this).parent().parent().remove();
    });
  });

对于每个以'delete-btn'为css类的div，它定义链接到click事件的函数，该事件删除该行。

Answer 3

您可以点击一直到<body>的气泡，检查$（this）是否为delete-btn，并做出相应的响应：

$("body").on( "click", function(){
    if ( $(this).hasClass("delete-btn") ){
        // Do some deleting, this is a delet button!
    } else {
        // Hide the button, this is some other element
        $(".delete-btn").removeClass("delete-btn-show").addClass("delete-btn-hide");
    }
});

jQuery单击任何内容，但链接到类

3 个答案: