Изменение определенного класа в зависимости от другого

[wkornilow]

Добрый день. Требуется совет.

Верстаю тренировочный сайтик:

http://projects.wkornilow.org.ua/sommelier/

Суть такова. Есть первый блок "Бокал". В зависимости от типа бокала в следующем блоке "Тип" выбирается соответствующее значение "Аперетив, диджестив" и так далее.

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

Прошу натолкните на путь истинный)

[BETEPAH]

Я бы делал так:

var glasses = [
{
aperitif = true,
hot = true,
milk = false
},{
aperitif = true,
hot = false,
milk = true
}];

now - получаете индекс текущего бокала
glasses[now] - получите свойства для этого бокала, проходитесь по ним и проставляете классы для элементов в списках других блоков.

[jsru_]

var glasses = [
{
aperitif = true,
hot = true,
milk = false
},{
aperitif = true,
hot = false,
milk = true
}];

что-то как-то затратно, тут обычное делегирование, кликаем по ul у всех li проставляем disabled кроме eventtarget

[wkornilow]

Мне бы были интересны разные варианты, так как только начинаю экспериментировать с JS после прочтения учебника.

[wkornilow]

Также интересует вопрос, как определить какой именно в данный момент показывает слайдер.

[BETEPAH]

кликаем по ul у всех li проставляем disabled кроме eventtarget

вы ссылку смотрели? При чем здесь делегирование? Требуется в зависимости от выбранного бокала раскрасить черным и серым пункты в других блоках. Где вы собираетесь хранить данные, какие блоки красить серым для каждого из 18ти бокалов?

Также интересует вопрос, как определить какой именно в данный момент показывает слайдер.

Определять не надо. В начальный момент индекс бокала равен, допустим, нулю. Он соответствует первому бокалу. Когда кликаете на контроллер слайдера, меняете этот индекс на 1 в строну уменьшения или увеличения. И всегда имеете текущий индекс.

[wkornilow]

Когда кликаете на контроллер слайдера, меняете этот индекс на 1 в строну уменьшения или увеличения. И всегда имеете текущий индекс.

Вопрос, как мне определить у какого именно <li> менять класс?

[BETEPAH]

Вопрос, как мне определить у какого именно <li> менять класс?

проставить у них ID соответствующее свойству.

<style>
ul {
	display: inline-block;
	width: 200px;
}
.that {
	font-weight: bold;
}
.active {
	color: #333;
}
.unactive {
	color: #aaa;
}
</style>
<input type="button" id="change" value="сменить набор" /> <br />
<ul id="sets">
	<li class="that">первый бокал</li>
	<li>второй бокал</li>
	<li>третий бокал</li>
</ul>
<ul id="ingradients">
	<li id="aperitif" class="active">аперитив</li>
	<li id="hot" class="active">горячее</li>
	<li id="milk" class="unactive">молоко</li>
</ul>

<script>
var glasses = [
	{
		aperitif : true,
		hot : true,
		milk : false
	},{
		aperitif : true,
		hot : false,
		milk : true
	},{
		aperitif : false,
		hot : true,
		milk : false
	}
];
var now = 0;
document.getElementById('change').onclick = function() {
	if (++now > glasses.length -1) now = 0;
	document.getElementsByClassName('that')[0].className = '';
	document.getElementById('sets').getElementsByTagName('li')[now].className = 'that';
	var set = glasses[now];
	for (var key in set) {
		document.getElementById(key).className = (set[key] === true) ? 'active': 'unactive';
	}
}
</script>

[wkornilow]

BETEPAH, спасибо за помощь. С этим все понятно.

Но все равно есть несколько вопрос (тапком прошу не бить).
Вопрос 1:

Выношу скрипт в отдельный *.js файл и подключаю его в header. При этом скрипт не работает. Я так понимаю что для правильной работы скрипта необходимо использовать window.onload. Я прав? Если нет, как добиться чтобы скрипт который я вынес в отдельный файл работал.

Вопрос 2:
Если вы переходили по ссылке, которую я размещал в 1 сообщении, там видно что есть 4 списка:
1) Тип бокала
2) Тип напитка
3) Количество градусов
4) Основа напитка

В зависимости от выбранного бокала соответственно меняется 2, 3, 4 список.

В приведенном Вами выше коде меняется только второй список.
Насколько я понимаю сделать зависимость также для 3 и 4 списка, можно добавив в массив вложенные массивы, например так:

var glasses = [
    {
        apperetive: true[{
            nonalcohol: false,
            lowdegree: true,
            middledegree: false,
            highdegree: true
        }],
        didjestive: false,
        hot: false,
        milk: false,
        desert: false,
        sloistie: false,
        deizi: false,
        dzuleti: false
    },
    {
        apperetive: false,
        didjestive: false,
        hot: false,
        milk: true,
        desert: false,
        sloistie: false,
        deizi: false,
        dzuleti: false
    },
    {
        apperetive: false,
        didjestive: false,
        hot: false,
        milk: false,
        desert: false,
        sloistie: false,
        deizi: false,
        dzuleti: true
    }

];

Скажите, так правильно реализовывать, или есть иной способ?

[BETEPAH]

В зависимости от выбранного бокала соответственно меняется 2, 3, 4 список.

нет необходимости делать вложенные массивы. Просто внесите классы 3го и 4го списка туда же, куда внесли классы 2го списка.