Получить индекс ячейки таблицы onClick с помощью JQuery

Question

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

Каждая ячейка таблицы содержит некоторые детали/содержимое (скрыто). Всякий раз, когда пользователь выбирает ячейку, мне нужно пройти через индекс, чтобы отобразить только данные/div внутри ячейки.

Каждая отдельная ячейка в таблице имеет 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/

Этот пример просто переключать классы, указанные в деталях div и скрывает/показывает связанный div внутри одного TD.

Если вы используете этот 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. 
}); 

Updated Fiddle

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;} 

Javascript

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