переключение слоев изображения 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) |
| Часовой пояс GMT +3, время: 11:24. |