使用JQuery獲取表onClick的單元格索引

Question

$('.details').click(function(){
  $(this).index()+1).toggleClass('.details, .overlay-wrapper');
});

每個表單元格中都有一些詳細信息/內容（隱藏）。 每當用戶選擇單元格時，我都需要通過索引，因此僅顯示該單元格中的詳細信息/格。

表格中的每個單元格在該單元格中都有一個div /細節。 因此，我只需要在正確的單元格內打開和關閉div。 目前，它會切換頁面上的每個詳細信息div。

謝謝

JsFiddle位於html的下方。

http://jsfiddle.net/t6yczwuo/

Answer 1

您顯示的代碼有幾個問題：

• 無與倫比的支架
• 對於toggleClass不正確的參數（無.並沒有逗號）

沒有HTML，這全是猜測，但是您很少需要索引來處理相關單元格。 下面的模型使用closest()查找TD父對象，然后使用find()查找同一TD中的另一個相關單元格：

$('.details').click(function(){
    $(this).toggleClass("details overlay-wrapper").closest('td').find('.someother').toggle();
});

JSFiddle： http : //jsfiddle.net/TrueBlueAussie/gj2zz8po/

本示例僅切換您在detail div上指定的類，並在同一TD中隱藏/顯示相關的div。

如果您使用此JSFiddle作為示例的開始，我們可以自定義代碼以匹配您的情況。

更新您的新HTML：

$('.details-more').click(function (e) {
    e.preventDefault();
    $(this).closest('td').find('.overlay-wrapper .details').toggle();
});

http://jsfiddle.net/TrueBlueAussie/gj2zz8po/2/

注意：即使在書簽鏈接上，也應使用e.preventDefault()來阻止單擊較長頁面時將頁面移到頂部。

Answer 2

您需要.next()而不是index() 。

.toggleClass()僅接受單個類名，而沒有. 。 另外，也不建議切換使用任何選擇器的類。

$('.details-more').click(function(e){
    e.preventDefault();
    $(this).next('.overlay-wrapper').find('div').toggleClass('details');

    //Instead of find('div') you could use a specific class selector - 
    //find('.targetHidden') provided this class remains static throughout the html.
});

更新小提琴

Answer 3

的HTML

<table style="width:100%">
  <tr>
    <td>Header</td>
    <td>Header</td> 
    <td>Header</td>
  </tr>
  <tr>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">THIS IS THE SOME DETAILS OR CONTENT</div></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">THIS IS SOME MORE CONTENT</div></div>
    </td>
  </tr>
  <tr>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">SOME TEST RANDOM STUFF</div></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
  </tr>
  <tr>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">SOME MORE CONTENT</div></div>
    </td>
  </tr>
  <tr>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
  </tr>
</table>

的CSS

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

.details {display:none;}

Java腳本

$('.details-more').click(function(){
  $(this).next('.overlay-wrapper').toggleClass('details');
});