Javascript-форум - переключение слоев изображения select

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

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - переключение слоев изображения select (https://javascript.ru/forum/dom-window/61136-pereklyuchenie-sloev-izobrazheniya-select.html)

переключение слоев изображения select

Всем доброго времени суток
прошу помочь с кодом

имеется это

<div class="">
	<div class="controller_one">
		<form>
		<select name="imagename" onChange="changeImage(this.form, 'pic1')">
			<option title="img/1/some0.png">0</option>
			<option title="img/1/some1.png">1</option>
			<option title="img/1/some2.png">2</option>
		</select>
		</form>
	</div>
	<div class="controller_two">
		<form>
		<select name="imagename" onChange="changeImage(this.form, 'pic2')">
			<option name="light" title="img/2/some0.png">0</option>
			<option name="light" title="img/2/some1.png">1</option>
			<option name="dark" title="img/2/some2.png">2</option>
			<option name="dark" title="img/2/some3.png">3</option>
			<option name="light" title="img/2/some4.png">4</option>
			<option name="dark" title="img/2/some5.png">5</option>
			<option name="light" title="img/2/some6.png">6</option>
		</select>
		<input type="hidden" data-img="img/light.png">
		<input type="hidden" data-img="img/dark.png">
		</form>
	</div>
	<div class="controller_three">
		<form>
		<select name="imagename" onChange="changeImage(this.form, 'pic3')">
			<option title="img/3/some0.png">0</option>
			<option title="img/3/some1.png">1</option>
			<option title="img/3/some2.png">2</option>
			<option title="img/3/some3.png">3</option>
			<option title="img/3/some4.png">4</option>
			<option title="img/3/some5.png">5</option>
			<option title="img/3/some6.png">6</option>
			<option title="img/3/some7.png">7</option>
		</select>
		</form>
	</div>
	<div class="images">
		<div class="null">
			<img name="pic1" src="img/1/some0.png" id="layer_0">
		</div>
		<div name="null">
			<img name="pci2" src="img/2/some0.png" id="layer_1">
		</div>
		<div class="null">
			<img name="pic3" src="img/3/some0.png" id="layer_2">
		</div>
		<div>
			<img class="over_ch" src="img/transparent.png" style="display:none;"  id="over layer_3">
		</div>
	</div>
	<input type="button" onclick="visibilityLayer('over');" value="Toggle"/>
</div>

<script>
	$(function() {
	   	$('select').on('change', function() {
	        var selector = 'input[data-img*="' + $(this).find("option:selected").attr('name') + '"]';
			var image = $(this).parent().find(selector).attr('data-img');
			    $(this).parent().find('img.over_ch').attr('src', image);
		 }); 
	});
//overlay chenger
</script>
<script type="text/javascript">
    function visibilityLayer(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }
//toggle
</script>
<script>
function changeImage(form, pic1) {selection = form.imagename.options[form.imagename.selectedIndex].title; document.images[pic1].src = selection;}
function changeImage(form, pic2) {selection = form.imagename.options[form.imagename.selectedIndex].title; document.images[pic2].src = selection;}
function changeImage(form, pic3) {selection = form.imagename.options[form.imagename.selectedIndex].title; document.images[pic3].src = selection;}
//layer chenger
</script>

проблема в том, что два скрипта (layer chenger и overlay chenger) по отдельности работают правильно
при попытке совместить из работу, overlay chenger на отказ не хочет работать

суть кода в чем, изпользуя слои одного размера с выравниванием по центру делаем будущий макет модели.
т.е. посредством select>option выбираем нужные цвет каждого из слоем
слой overlay скрыт,отображается только по нажатию на toggle , использоваться он по идее должен совмесно с layer_1
в зависимости от значения в атрибуте name из выпадающего списка (привязанного к этому слою) в layer_3 меняется url изображения из скрытых инпутов ниже

оговорюсь...по отдельности скрипты работают отлично,вместе работает только один (layer chenger)

AlphaKeloid,
а если так добавить

$(function() {
            $('select').on('change', function () {
                var selector = 'input[data-img*="' + $(this).find("option:selected").attr('name') + '"]';
                var image = $(this).parent().find(selector).attr('data-img');
                $(this).parent().find('img.over_ch').attr('src', image);
            });
            function visibilityLayer(id) {
                var e = document.getElementById(id);
                if (e.style.display == 'none')
                    e.style.display = 'block';
                else
                    e.style.display = 'none';
            }

            function changeImage(form, pic1) {
                selection = form.imagename.options[form.imagename.selectedIndex].title;
                document.images[pic1].src = selection;
            }

            function changeImage(form, pic2) {
                selection = form.imagename.options[form.imagename.selectedIndex].title;
                document.images[pic2].src = selection;
            }

            function changeImage(form, pic3) {
                selection = form.imagename.options[form.imagename.selectedIndex].title;
                document.images[pic3].src = selection;
            }


        });

так вообще не работает ничего

AlphaKeloid,
нужно

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

вначале подгрузить

нашел проблему. метод find() ищет элемент (img,div,span outher) но как я понял не работает с css классами
кто нибудь подсказать альтернативу?

я вот так подгружаю

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

AlphaKeloid,

<!DOCTYPE HTML>

<html>

<head>
  <title>Unvalued</title>
  <meta charset="utf-8">
  <style type="text/css">
    .over_ch{
      display: none;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
  $(function() {
    $("select").change(function() {
        var i = $("select").index(this);
        var src = this.value;
        $(".images img").eq(i)[0].src = src;
        src = {
            light: "img/light.png",
            dark: "img/dark.png"
        }[$(this).find("option:selected").data("name")];
        src && ($(".images img").last()[0].src = src)
    });
    $(".over").click(function() {
        $(".over_ch").toggle()
    })
});
  </script>
</head>

<body>
<div class="">
	<div class="controller">

		<select>
			<option value="img/1/some0.png">0</option>
			<option value="img/1/some1.png">1</option>
			<option value="img/1/some2.png">2</option>
		</select>

	</div>
	<div class="controller">

		<select>
			<option data-name="light" value="img/2/some0.png">0</option>
			<option data-name="light" value="img/2/some1.png">1</option>
			<option data-name="dark" value="img/2/some2.png">2</option>
			<option data-name="dark" value="img/2/some3.png">3</option>
			<option data-name="light" value="img/2/some4.png">4</option>
			<option data-name="dark" value="img/2/some5.png">5</option>
			<option data-name="light" value="img/2/some6.png">6</option>
		</select>

	</div>
	<div class="controller">

		<select>
			<option value="img/3/some0.png">0</option>
			<option value="img/3/some1.png">1</option>
			<option value="img/3/some2.png">2</option>
			<option value="img/3/some3.png">3</option>
			<option value="img/3/some4.png">4</option>
			<option value="img/3/some5.png">5</option>
			<option value="img/3/some6.png">6</option>
			<option value="img/3/some7.png">7</option>
		</select>

	</div>
	<div class="images">
		<div class="null">
			<img name="pic1" src="img/1/some0.png" >
		</div>
		<div name="null">
			<img name="pci2" src="img/2/some0.png" >
		</div>
		<div class="null">
			<img name="pic3" src="img/3/some0.png" >
		</div>
		<div>
			<img class="over_ch" src="img/transparent.png" >
		</div>
	</div>
	<input type="button" class="over" value="Toggle"/>
</div>

</body>

</html>

рони,Все работает как часы))
огромное спасибо)

рони,
добрый вечер
сегодня после тестов возникла ошибка
Uncaught TypeError: Cannot set property 'src' of undefined
ругается эту строку

$(".images img").eq(i)[0].src = src;

что показывает консоль

Uncaught TypeError: Cannot set property 'src' of undefined
(anonymous function) @ test.html:20
m.event.dispatch @ jquery.min.js:3
m.event.add.r.handle @ jquery.min.js:3

причину появления так и не смог обнаружить
вы извинит,я новичек в этом,прошу Вас помочь

AlphaKeloid,
значит у вас исчезли картинки со страницы или вы перенесли их в другое место или запустили скрипт без строки 16 или убили $ (заменить все $ на jQuery)

рони,
понял в чем дело, когда убрал у всех тэгов option атрибут value
оказывается третий select>option (как и второй) почему-то выдавал туже самую ошибку
в то время как первый не реагировал вовсе
решил проблему добавлением класса как уточнение для задействования нужного select>option

var i = jQuery(".cont select").index(this);

хотя...Вы знаете...почему-то до сих пор остальные селекторы меняют src
тлько не ссылку на img а примерно так

тут задействован нужный select>option

<img class="over_ch" src="elipse/016s.png" style="display: inline;">

тут два остальных

<img class="over_ch" src="4" style="display: inline;">

т.е. элементы option на данный момент выглядят так

<select>
	<option>0</option>
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
</select>

вносить изменений они не должны,но они все же вносят изменения

Цитата:

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

когда убрал у всех тэгов option атрибут value

плохая практика использовать что угодно, кроме того что для этого предназначено.

все))))
решено)
лишнее не задействовано
все гуд)

jQuery(function() {
    jQuery(".cont").change(function() {
        var i = jQuery(".cont").index(this);
        var src = this.value;
        jQuery(".images img").eq(i)[0].src = src;
        src = {
            light: "elipse/010s.png",
            dark: "elipse/016s.png"
        }[jQuery(this).find("option:selected").data("name")];
        src && (jQuery(".images img").last()[0].src = src)
    });
    jQuery(".over").click(function() {
        jQuery(".over_ch").toggle()
    })
});

заменил во второй и третей строках select на имя класса