Javascript-форум - Условия в скрипте в зависимости от input type="radio"

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Условия в скрипте в зависимости от input type="radio" (https://javascript.ru/forum/jquery/7599-usloviya-v-skripte-v-zavisimosti-ot-input-type%3D-radio.html)

FladeX

09.02.2010 23:06

Условия в скрипте в зависимости от 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")
	{
	}

Что не так?

sysya

10.02.2010 08:24

Может это http://javascript.ru/switch
Хотя if тоже как switch
Чё та не пойму, читаю не врубаюсь

Может так проверять

if ($('input:checked:enabled').val()=='top') { /*химичим с верхней*/ }

надеюсь без ошибок написал:)

FladeX

10.02.2010 20:40

Ааа, вон там какой синтаксис) Спасибо, помогло :)

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

То есть у дефолтной ячейки рамка меняет цвет на красный, но обратно уже не меняет, хотя без условия с чекбоксами все работает адекватно. В чем может быть проблема?

sysya

10.02.2010 21:17

Потому что 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 код не видел полностью, не могу понять как действовать. Там таблица или что?

FladeX

11.02.2010 02:17

Да, там таблица - http://forumcatalog.ru/d/#pl (вариант #2)

Все td выбирать не хотелось бы, так как таблица будет минимум 12*12.

FladeX

11.02.2010 16:18

Кажется я понял проблему. Онклик тут правильно использован, загвоздка не в нем, а в this:

$("td").click(function () {
	if ($('input:checked:enabled').val()=='top')
	{
		if ($(this).css("border-top") != "1px solid red")
		{

При такой конструкции this уже не td, а input, насколько я понимаю. Тогда вопрос, как передать в самое вложенное условие нужный элемент (то есть td)?

subzey

11.02.2010 16:29

$(this).parents("td").eq(0)

FladeX

11.02.2010 21:08

Почитал в 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 вообще в разных местах?

sysya

11.02.2010 22:07

Попробуй поиграться с toggle()

А в новом jquery можно вот так цвет менять

$('el').css('border-color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

i - индекс элемента в наборе всех выбранных элементов;
currentCssColor - текущий цвет бордера этого элемента;

i % 2 - условие при котором меняется цвет;

Подробнее примеры http://api.jquery.com/css/ правда на английском

FladeX

17.02.2010 13:52

Да цвет поменять не проблема. Проблема именно в том, как определить рамку, у которой менять цвет (варианта 4 - верх, право, низ, лево). С переключателями бьюсь, но пока безрезультатно.

subzey

17.02.2010 14:14

Цитата:

Сообщение от sysya

А в новом jquery можно вот так цвет менять

Новый jQuery нравится мне всё меньше и меньше.

FladeX

17.02.2010 14:14

Большая просьба посмотреть код и сказать, почему может не работать "отключение" цвета рамки - http://forumcatalog.ru/d/#pl
Без переключателей "верх - .. - низ", первый клик вызывал окрашивание в красный цвет, второй клик возвращал цвет рамки в обычное состояние. Теперь же только первая часть выполняется. Почему так?

FladeX

17.02.2010 14:22

Хм.. Если назначить цвет таким образом:

$(this).css("border-right","1px solid red");

То такое условие

if ($(this).css("border-right") == "1px solid red")

всегда оказывается false... Почему?

sysya

17.02.2010 14:45

Так пробани цвет проверить

$('el').css('border-color', function(i, currentCssColor){ 
    return currentCssColor!='red' ? 'red' : 'blue'; 
});

FladeX

17.02.2010 15:05

Проверил. Красный.
Два факта:
1. Без родительских условий

if ($('input:checked:enabled').val()=='top')

все работает нормально.
2. Цвет задается в коде, а в условии проверяется именно то значение, которое устанавливалось в коде выше.

sysya

17.02.2010 17:27

Метод css возвращает красный так #ff0000, значит проверять и устанавливать цвет так

$(this).css("border-right","1px solid #ff0000");
if ($(this).css("border-right") == "1px solid #ff0000"){}

Да, на всякий случай можно пользоваться яваскриптовым методом alert(), что посмотреть какая конструкция что выводит

alert($(this).css("border-right"));//выведет 1px solid #ff0000

Часовой пояс GMT +3, время: 18:50.