toggleClass только для родителя
Здравствуйте, В javascript я новичек, в связи с чем у меня не получается реализовать данную задумку. При клике на div c классом button к строке таблицы с классом red добавляется класс green. Да, так все и происходит, вот только добавляется класс сразу к трем строкам, а нужно, что бы только к строке родителя div
$('.button').click(function(){ $('.red').toggleClass('green'); <table> <tr class="red"> <td><div class="button"></div></td> </tr> <tr class="red"> <td><div class="button"></div></td> </tr> <tr class="red"> <td><div class="button"></div></td> </tr> </table> |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <script src='http://code.jquery.com/jquery-latest.js'></script> <!-- <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> .red { color: red; } .green { color: green; } .button { width: 10px; height: 10px; border: 1px solid; } </style> <script type='text/javascript'> $(function(){ $('.button').click(function(){ $(this).parents('.red').toggleClass('green'); }); }); </script> </head> <body> <table> <tr class="red"> <td><div class="button"></div></td> </tr> <tr class="red"> <td><div class="button"></div></td> </tr> <tr class="red"> <td><div class="button"></div></td> </tr> </table> </body> </html> P.S. Начинай делать полные тестовые примеры, а не огрызки... |
Спасибо, вот только я немного с постановкой задачи ошибся, конструкция на самом деле вот такая, то есть кнопка по которой кликаем находится в своей строке таблицы, а строка таблицы с классом .red которая должна подсвечиваться находится выше
<table> <tr class="red"><td>текст</td></tr> <tr><td><div class="button"></div></td></tr> <tr class="red"><td>текст</td></tr> <tr><td><div class="button"></div></td></tr> <tr class="red"><td>текст</td></tr> <tr><td><div class="button"></div></td></tr> </table> |
Kukolnik,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <script src='http://code.jquery.com/jquery-latest.js'></script> <!-- <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> .red { color: red; } .green { color: green; } .button { width: 10px; height: 10px; border: 1px solid; } </style> <script type='text/javascript'> $(function(){ $('.button').click(function(){ $(this).parent().parent().prev().toggleClass('green'); }); }); </script> </head> <body> <table> <tr class="red"><td>текст</td></tr> <tr><td><div class="button"></div></td></tr> <tr class="red"><td>текст</td></tr> <tr><td><div class="button"></div></td></tr> <tr class="red"><td>текст</td></tr> <tr><td><div class="button"></div></td></tr> </table> </body> </html> |
Kukolnik,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .red { color: red; } .green td{ color: #FFFFFF; background-color: green; padding: 4px 8px; } .button { width: 10px; height: 10px; border: 1px solid; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { var but = $('.button'), red = $('.red'); but.click(function(){ var i = but.index(this); red.eq(i).toggleClass('green'); }); }); </script> </head> <body> <table> <tr class="red"><td>текст</td></tr> <tr><td><div class="button"></div></td></tr> <tr class="red"><td>текст</td></tr> <tr><td><div class="button"></div></td></tr> <tr class="red"><td>текст</td></tr> <tr><td><div class="button"></div></td></tr> </table> </body> </html> |
Часовой пояс GMT +3, время: 15:12. |