Question

我正在尝试使用jquery切换表中的隐藏行。另外，当我点击图标时，我想将glyphicon的状态从plus更改为minus（反之亦然）。出于某种原因，我遇到了类选择器的问题。当我从加号图标转到减号图标时，它可以正常工作。但是，我不能从减号图标转到加号图标。 jquery click hook仍在处理错误的函数。

这是jsfiddle http://jsfiddle.net/gs4te89g/

HTML：

<table id="table" class="table table-hover table-striped" style="margin-top: 0px;">
    <thead>
      <tr>
        <th class="detail" rowspan="1"><div class="fht-cell"></div></th>
        <th style="" data-field="id" tabindex="0"><div class="th-inner ">Item ID</div>
          <div class="fht-cell"></div></th>
        <th style="" data-field="name" tabindex="0"><div class="th-inner ">Item Name</div>
          <div class="fht-cell"></div></th>
        <th style="" data-field="price" tabindex="0"><div class="th-inner ">Item Price</div>
          <div class="fht-cell"></div></th>
      </tr>
    </thead>
    <tbody>
      <tr data-index="0">
        <td><a class="detail-icon" href="javascript:"><i class="glyphicon glyphicon-plus icon-plus" id="1"></i></a></td>
        <td style="">0</td>
        <td style="">Item 0</td>
        <td style="">$0</td>
      </tr>
        <tr id="detail-view1" style="background-color:yellow;display: none;">
        <td colspan="4">My Hidden Row</td>
      </tr>
 </tbody>

和javascript：

 $('.glyphicon.glyphicon-plus').on('click', function (e) {
    e.preventDefault();
    $(this).removeClass('glyphicon-plus icon-plus');
    $(this).addClass('glyphicon-minus icon-minus');
    $('#detail-view'+this.id).toggle('slow');
});
$('.glyphicon.glyphicon-minus').on('click', function (e) {
    e.preventDefault();
    $(this).removeClass('glyphicon-minus icon-minus');
    $(this).addClass('glyphicon-plus icon-plus');
    $('#detail-view'+this.id).toggle('slow');
});

Answer 1

是的，您需要使用事件委派......

试试这个......

    $('tr').on('click', '.glyphicon.glyphicon-plus',function (e) {
        e.preventDefault();
        $(this).removeClass('glyphicon-plus icon-plus');
        $(this).addClass('glyphicon-minus icon-minus');
        $('#detail-view'+this.id).toggle('slow');
    });
    $('tr').on('click', '.glyphicon.glyphicon-minus',function (e) {
        e.preventDefault();
        $(this).removeClass('glyphicon-minus icon-minus');
        $(this).addClass('glyphicon-plus icon-plus');
        $('#detail-view'+this.id).toggle('slow');
    });

之所以这样，是因为你绑定了一个尚未存在的元素，因此无法正常工作。通过将事件绑定委托给它的父级，在此我选择了tr元素，您可以绑定到尚未存在的元素。

Answer 2

您可以将代码包装到一个函数中，然后使用hasClass代替：

$('.glyphicon').on('click', function (e) {
    e.preventDefault();
    if ($(this).hasClass('glyphicon-plus')){
        $(this).removeClass('glyphicon-plus icon-plus');
        $(this).addClass('glyphicon-minus icon-minus');
        $('#detail-view'+this.id).toggle('slow');
    } else 
    {
        $(this).removeClass('glyphicon-minus icon-minus');
        $(this).addClass('glyphicon-plus icon-plus');
        $('#detail-view'+this.id).toggle('slow');
    }
});

http://jsfiddle.net/gs4te89g/2/

代码中的问题是，当dom中不存在时，您将绑定到减号图标。

jquery类选择器问题 - 单击钩子不按预期工作

2 个答案: