Помогите исправить Javascript на странице

anutti · January 31, 2015

Мне необходимо чтобы круглых меню было 3 штуки, а скрипт написан только для одного:



<body>  


   

<section>

<select class="cs-select cs-skin-circular">

<option value="" disabled selected>Select an activity</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option>

</select>

</section>   

            


<section>

<select class="cs-select cs-skin-circular">

<option value="" disabled selected>Select an activity</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option>

</select>

</section>  

            


<section>

<select class="cs-select cs-skin-circular">

<option value="" disabled selected>Select an activity</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option>

</select>

</section>  

                 

<!--В это блоке тоже должна появляться соответствующая картинка только большая и с пояснением-->

<div class="select-img"><img src="img/00_**.png" > text </div>



<!--Вот сам скрипт -->



<script src="js/classie.js"></script>

<script src="js/selectFx.js"></script>

<script>

(function() {

[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {

new SelectFx(el, {

stickyPlaceholder: false,

onChange: function(val){

var img = document.createElement('img');

img.src = 'img/'+val+'.png';

img.onload = function() {

document.querySelector('span.cs-placeholder').style.backgroundImage = 'url(img/'+val+'.png)';

};

}

});

} );

})();

</script>

</body>

Можно посмотреть пример работы меню тут http://tympanus.net/Development/SelectInspiration/index8.html

Помогите пожалуйста, я не знаю яву, пыталась сделать по аналогии с другим скриптом но ни чего не вышло.

Заранее Спасибо.

anutti · January 31, 2015

Немного поменяла код, чтобы не подумали что у меня что-то из базы берется, все есть на этой же странице

Помогите пожалуйста .

<body><section><select class="cs-select cs-skin-circular"><option value="" disabled selected>Select an activity</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option></select></section><!-- добавла к каждоу блоку--><div class="select-img select" id="s1"><img src="img/00_1.png" > text </div>...<div class="select-img select" id="s5"><img src="img/00_5.png" > text </div><section><select class="cs-select cs-skin-circular"><option value="" disabled selected>Select an activity</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option></select></section><div class="select-img" id="s6"><img src="img/00_6.png" > text </div>...<div class="select-img select" id="s9"><img src="img/00_9.png" > text </div><section><select class="cs-select cs-skin-circular"><option value="" disabled selected>Select an activity</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option></select></section><div class="select-img" id="s10"><img src="img/00_10.png" > text </div>...<div class="select-img select" id="s12"><img src="img/00_12.png" > text </div><!--Вот сам скрипт --><script src="js/classie.js"></script><script src="js/selectFx.js"></script><script>(function() {[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {new SelectFx(el, {stickyPlaceholder: false,onchange: function(val){var img = document.createElement('img');img.src = 'img/'+val+'.png';img.onload = function() {document.querySelector('span.cs-placeholder').style.backgroundImage = 'url(img/'+val+'.png)';};}});} );})();</script></body>

Sensei · January 31, 2015

Попробуйте так

<script src="js/classie.js"></script><script src="js/selectFx.js"></script><script>    Array.prototype.forEach.call(document.querySelectorAll('select.cs-select'), function(el) {            new SelectFx(el, {stickyPlaceholder: false});                el.addEventListener('change', function(e) {                    var placeholder = this.parentNode.querySelector('.cs-placeholder');                        placeholder.style.backgroundImage = 'url(img/' + this.value + '.png)';                    }, false);                                 });    </script>

anutti · February 1, 2015

Спасибо что ответили, но все равно у меня не получилось... (

может быть работает и правильно, но где-то все равно что-то не так, просто перестали картинки заменяться на выбранную всегда виден только изначальный кружок.

напишите пожалуйста, где еще у меня может быть баг.

Sensei · February 1, 2015

Может так поможет

«selectFx» немного поправил, замените https://yadi.sk/d/nEWrZDDLeNquy

<script src="js/classie.js"></script><script src="js/selectFx.js"></script><script>(function() {    Array.prototype.forEach.call(document.querySelectorAll('select.cs-select'), function(el) {        new SelectFx(el, {            stickyPlaceholder: false,            onChange: function(target){                                target.parentNode.querySelector('span.cs-placeholder').style.backgroundImage = 'url(img/'+ target.value +'.png)';            }        });    });})();</script>

nerv · February 1, 2015

в es6 можно будет так

Array.from(document.querySelectorAll('select.cs-select')).forEach(function(el) {    // code here});

или

Array.from(document.querySelectorAll('select.cs-select'), function(el) {    // code here});

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Впрочем, так можно уже сегодня, если подключить полифил

Sign In

Помогите исправить Javascript на странице

Question

anutti

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

anutti

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

anutti

Link to comment

Share on other sites

Sensei

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information