Условия в скрипте в зависимости от input type="radio"
Функция, которая при клике меняет цвет рамок у ячеек таблицы:
$("td").click(function () {
if ($(this).css("border") != "1px solid red")
{
$(this).css("border","1px solid red");
}
else
{
$(this).css("border","1px solid #D8D8C0");
}
});
Мне нужно добавить 4 переключателя, и в зависимости от отмеченного, менять только одну рамку. Переключатели - верх, право, низ, лево - меняют соответствующую рамку в ячейке. Но почему-то при добавлении такого условия не происходит обработки ситуации. Делал, например, так: <form action="#" method="post"> <input type="radio" name="bordertype" id="type_top" value="top" checked="checked" /> Верх <input type="radio" name="bordertype" id="type_right" value="right" /> Право <input type="radio" name="bordertype" id="type_bottom" value="bottom" /> Низ <input type="radio" name="bordertype" id="type_left" value="left" /> Лево </form>
if ($(#type_top).attr("checked") == "checked")
{
}
Что не так? |
Может это http://javascript.ru/switch
Хотя if тоже как switch Чё та не пойму, читаю не врубаюсь Может так проверять
if ($('input:checked:enabled').val()=='top') { /*химичим с верхней*/ }
надеюсь без ошибок написал:) |
Ааа, вон там какой синтаксис) Спасибо, помогло :)
UPD. Только после этого перестал работать else:
if ($('input:checked:enabled').val()=='top')
{
if ($(this).css("border-top") != "1px solid red")
{
$(this).css("border-top","1px solid red");
}
else
{
$(this).css("border-top","1px solid #D8D8C0");
}
}
То есть у дефолтной ячейки рамка меняет цвет на красный, но обратно уже не меняет, хотя без условия с чекбоксами все работает адекватно. В чем может быть проблема? |
Потому что CLICK-событие работает када кликнешь, цвет меняется, вместо условия
if ($(this).css("border-top") != "1px solid red")
{
$(this).css("border-top","1px solid red");
}
else
{
$(this).css("border-top","1px solid #D8D8C0");
}
нужно выбрать все TD кроме THIS, и переключить им цвет отдельноHTML код не видел полностью, не могу понять как действовать. Там таблица или что? |
Да, там таблица - http://forumcatalog.ru/d/#pl (вариант #2)
Все td выбирать не хотелось бы, так как таблица будет минимум 12*12. |
Кажется я понял проблему. Онклик тут правильно использован, загвоздка не в нем, а в this:
$("td").click(function () {
if ($('input:checked:enabled').val()=='top')
{
if ($(this).css("border-top") != "1px solid red")
{
При такой конструкции this уже не td, а input, насколько я понимаю. Тогда вопрос, как передать в самое вложенное условие нужный элемент (то есть td)? |
$(this).parents("td").eq(0)
|
Почитал в api про parents и eq и еще больше запутался - причем тут они?
Есть функция обработки клика на ячейку таблицы. Соответственно, this - это тот самый td, на который кликнули. Но потом-то мы в условии используем input, поэтому в this у нас уже не td будет - правильно я понимаю? Поясню краткую структуру: <table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table> <form> <input /> <input /> </form> К чему тут parents использовать, если инпут и td вообще в разных местах? |
Попробуй поиграться с toggle()
А в новом jquery можно вот так цвет менять
$('el').css('border-color', function(i, currentCssColor){
return i % 2 ? 'red' : 'blue';
});
i - индекс элемента в наборе всех выбранных элементов; currentCssColor - текущий цвет бордера этого элемента; i % 2 - условие при котором меняется цвет; Подробнее примеры http://api.jquery.com/css/ правда на английском |
Да цвет поменять не проблема. Проблема именно в том, как определить рамку, у которой менять цвет (варианта 4 - верх, право, низ, лево). С переключателями бьюсь, но пока безрезультатно.
|
| Часовой пояс GMT +3, время: 12:16. |