Не окрашиваются стоки таблицы
Фрагмент таблицы:
print "<tr class=trTheme id=$Fetch[id]>
<td width='16' class='theme'> <input type='checkbox' class='cbTheme' id=$Fetch[id] name='cbTheme$Fetch[id]' value=$Fetch[id]/></td>";
Событие клика на чекбокс и вызов функции окраски строки таблицы:
function select_color_tr(id) {
/*Выделяем цветом строки отмеченные галочкой*/
if ($('.cbTheme#'+id).attr('checked')) {
$('.trTheme#'+id).addClass('temp');
}
else {
$('.trTheme#'+id).removeClass('temp');
}
}
/*Кликаем по галочке темы*/
$('.cbTheme').click(function() {
var id=$(this).attr('id');
select_color_tr(id);
});
При клике на чекбоксе в FireFox и IE строки не окрашиваются, а в опере окрашиваются. В чем проблема? |
У вас какая-то сложная функция, зачем она вообще? Вот так работает везде:
$(".cbTheme:checkbox").change(function(){
if ($(this).is(":checked"))
$(this).closest(".trTheme").addClass('temp');
else
$(this).closest(".trTheme").removeClass('temp');
});
|
Посмотрите теперь
Но ответьте, пожалуйта на вопрос, почему все-таки не работает? Ведь если мы будем сталкиваться с проблемами и придумывать другие пути их решения, то мы не решаем трудности, а ищем легкие пути или те, которые уже раньше проходили. В предыдущем скрипте было все так сложно, т.к. я подразумевал что функция select_color_tr(id) быдет вызываться и при щелчке на чекбоксе и на строке.
Переделал скрипт, теперь если кликаем по галочке, то строчка окрашивается, а если кликаем по строчке, то галочка не ставиться и строчка не окрашивается.
/*Кликаем по галочке темы*/
$('.cbTheme').click(function() {
var id =$(this).attr('id');
/*Выделяем цветом строки отмеченные галочкой*/
if ($(this).attr('checked')) {
$('.trTheme#'+id).addClass('temp');
}
else {
$('.trTheme#'+id).removeClass('temp');
}
changeMenu();
});
/*если кликнули по строчке, то ставим галочку и окрашиваем*/
$('.trTheme').click(function() {
var id = $(this).attr('id');
$('.cbTheme#'+id).click();
});
|
Ну во-первых, у вас повторяется id - у чебокса и строки, а он должен быть уникальным.
А во-вторых, мне кажется, у чебокса просто нет метода click(). Или есть не во всех браузерах. С этим методом вообще много непоняток, лучше уж атрибут менять. |
А если одинаковые id, но в разных классах? Я ведь явно пишу принадлежность id к классу cbTheme.
$('.cbTheme#'+id)
Это не правильно?Если так нельзя, то тогда id элемента нужно передавать в каком-то придуманном атрибуте (не стандартном в html). Как в такой ситуации лучше идентифицировать конкретный элемент в группе? Или в цикле где формируются строки таблицы подключать обработчики событий с помощью bind()? |
Все равно в каких классах, id должен быть один. Файрфокс, во всяком случае, видит только первый, если элементов с одним id несколько.
|
Как быть в такой ситуации?
Как в такой ситуации лучше идентифицировать конкретный элемент в группе?
Или в цикле где формируются строки таблицы подключать обработчики событий с помощью bind()? |
Ну можно к одному из id впереди буковку добавить. А вот bind не спасет, если метода нету.
|
Цитата:
А в jQuery обращаться так: $('.valera.volodia') |
Цитата:
print "<tr class=trTheme id=tr$Fetch[id]>
<td width='16' class='theme'> <input type='checkbox' class='cbTheme' id=cb$Fetch[id] name='cbTheme$Fetch[id]' value=$Fetch[id]/></td>";
Добавил к id строки "tr" и к id чекбокса "cb". Тогда чтобы узнать id, нужно вырезать эти буквы из id? |
Знаете, это все на самом деле проще: если вы кликаете по чебоксу, вы все равно кликаете по строке. Вот такой обработчик поставьте, и бог с ними, с id совсем:
$('.trTheme').click(function() {
$(this).toggleClass('temp');
if ($(this).hasClass('temp'))
$(this).find('.cbTheme').attr('checked', 'checked');
else
$(this).find('.cbTheme').removeAttr('checked');
});
|
Спасибо, это верно.
А напишите, как на будующее лучше передавать этот id. Использовать нестандартные атрибуты или добавлять к id какой-то префикс и затем в событии его обрезать? |
Ну, если id вам нужен, то лучше префикс. По id быстрее работает, чем по атрибутам.
|
| Часовой пояс GMT +3, время: 13:35. |