Jump to content

Несколько одинаковых скриптов на странице


Recommended Posts

Здравствуйте!

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

<input type="radio" name="nameRadio" value="шт." checked="checked"/><input type="radio" name="nameRadio" value="п.м"/><output id="rezultatRadio">шт.</output><script>window.onclick = function onclickRadio() {  var nameRadio = document.getElementsByName('nameRadio');  for (var i = 0; i < nameRadio.length; i++) {    if (nameRadio.type === 'radio' && nameRadio.checked) {        rezultatRadio = nameRadio.value;           }  }  document.getElementById('rezultatRadio').innerHTML = rezultatRadio;}</script>

(пример совсем немного переделала, взяла отсюда: http://shpargalkablog.ru/2013/04/value-input-javascript.html )

 

shtuki.jpg

Нужно, чтобы при нажатии на радио-кнопку, значение её value передавалось в output (находится выше input-ов)

 

Проблема в том, что это элемент блока товара страницы каталога, на которой этих товаров может быть очень много и писать подряд много одинаковых скриптов, в которых отличается только id и name, кажется мне не лучшей идеей

AD_catalog_list.jpg

Link to comment
Share on other sites

Во-первых, у вас в скрипте ошибка.

Во-вторых, вешать обработчик клика таким образом - не лучшая идея. Даже очень плохая идея.

Представим, что у нас миллион радио-кнопок. Так же представим, что у нас нет никакого JS-фреймворка и мы пишем на чистом JS. В таком случае самое простое - это каждой радио-кнопке проставить определённый класс (а ещё лучше data-атрибут), затем нужно найти все радиокнопки на странице (document.querySelectorAll - если вас интересуют только новые браузеры, или document.getElementsByTagName - если мы поддерживаем старые версии). После того как мы получили массив элементов мы пробегаемся по нему циклом и отсортировываем только нужные нам инпуты (т.е. только те у которых стоит некий класс или присутствует нужный нам data-атрибут). И уже этим элементам назначаем обработчик клика. Только нужно не забыть назначение обработчика завернуть в замыкание, а то все элементы получат обработчик как у последнего. Делается это так:

for (var i = elems.length; i >= 0; i--) { // цикл по элементам  (function(el) { // собственно замыкание    el.onclick = function() {      console.log(i); // ну или чего вы там делать по клику собрались    };  })(elems[i]);}
Link to comment
Share on other sites

Во-первых, у вас в скрипте ошибка.

Во-вторых, вешать обработчик клика таким образом - не лучшая идея. Даже очень плохая идея.

Представим, что у нас миллион радио-кнопок. Так же представим, что у нас нет никакого JS-фреймворка и мы пишем на чистом JS. В таком случае самое простое - это каждой радио-кнопке проставить определённый класс (а ещё лучше data-атрибут), затем нужно найти все радиокнопки на странице (document.querySelectorAll - если вас интересуют только новые браузеры, или document.getElementsByTagName - если мы поддерживаем старые версии). После того как мы получили массив элементов мы пробегаемся по нему циклом и отсортировываем только нужные нам инпуты (т.е. только те у которых стоит некий класс или присутствует нужный нам data-атрибут). И уже этим элементам назначаем обработчик клика. Только нужно не забыть назначение обработчика завернуть в замыкание, а то все элементы получат обработчик как у последнего. Делается это так:

 

for (var i = elems.length; i >= 0; i--) { // цикл по элементам  (function(el) { // собственно замыкание    el.onclick = function() {      console.log(i); // ну или чего вы там делать по клику собрались    };  })(elems[i]);}

А HTML нужно будет переделать, получается?

Если будет много инпутов с одним и тем же классом, как скрипт "узнает", в какой именно output выводить значение?

<form class="myform"><input type="radio" name="nameRadio" value="шт." checked="checked"/><input type="radio" name="nameRadio" value="п.м"/><output id="rezultatRadio">шт.</output></form>

Можно ведь сделать так, чтобы скрипт работал для form с определённым классом?

Edited by Алёна Стрелкова
Link to comment
Share on other sites

Можно ведь сделать так, чтобы скрипт работал для form с определённым классом?

Можно и так: найти все радио-кнопки внутри определённой формы.

Если будет много инпутов с одним и тем же классом, как скрипт "узнает", в какой именно output выводить значение?

У вас несколько output'ов или как?
Link to comment
Share on other sites

 

Можно ведь сделать так, чтобы скрипт работал для form с определённым классом?

Можно и так: найти все радио-кнопки внутри определённой формы.

Если будет много инпутов с одним и тем же классом, как скрипт "узнает", в какой именно output выводить значение?

У вас несколько output'ов или как?

 

да, output-ов несколько

и для каждого outputa-а по два inputa

Клик здесь не подходит, есть же событие «change»

Я бы примерно так сделал http://jsfiddle.net/99a2t2az/

Значения атрибутов «name» и «data-js-name» должны быть идентичны.

 

Спасибо большое! Попробую сделать так

Значения атрибутов «name» и «data-js-name» должны быть идентичны.

 

Получается, всё равно для каждого отдельно нужно задавать name и data-js-name

Edited by Алёна Стрелкова
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Kasl68
      Не могу значение с одного поле на другой, через  JavaScript. Помогите пожалуйста!
      <!DOCTYPE HTML> <html lang="kz"> <head>     <meta charset="utf-8"> <title> ВЫВОД </title> </head> <body>    <input type="text" name="Vvod" value="Пример" placeholder="введите имя"> <input type="text" name="Vyvod"> <br> <input type="submit"></button> <br> <script type="text/javascript">     function submit() {     let Vvod=document.getElementsByTagName('Vvod');     Vyvod.value=Vvod;     console.log(Vyvod.value);     } </script>   </body> </html>  
    • By Ron2
      Здравствуйте.
      Подскажите пожалуйста, почему скрипт (для оформления html страниц) не открывает новую страницу при нажатии мыши на картинку 7.jpg при помощи функции onclick=window.open (сразу отмечу что это мои эксперименты и при вводе этой функции в формате с кавычками onclick="window.open('https://web.com')" скрипт сразу становится не работоспособным, и я не большой специалист в программировании, что бы понять как заставить работать эту гиперссылку).
      Привожу ниже блок кода из скрипта, который открывает основную просматриваемую им страницу и сразу же (без нажатия мыши на картинку 7.jpg) одновременно открывает с помощью window.open и дополнительно вкладку с страницей  https://web.com. Как правильно скорректировать этот блок кода, что бы он делал переход только при нажатии кнопки.
      var i=xi("img");i.src="7.jpg",n=(n||[]).concat([{view:i,view:i,url:i.src,onclick:i,href: window.open('https://web.com'), link:"www.web.com",region:0,x:8,y:8,alpha:1,width:120,height:90}])}
      Спасибо всем, кто сможет помочь.
    • By Launder
      Решил поэкспериментировать с динамическим изменением индикации, вот по этому заданию. Как мне казалось, это реально: стили для любого значения параметра загружаются сразу, изменяется параметр - сразу применяются стили, соответствующие новому параметру. Но почему-то эта "динамика" работает, только для параметра, заданного по-умолчанию. Почему стили не применяются к изменённому параметру? Какова тут логика работы и возможно ли подобное, сделать на чистом CSS? Спасибо.
      PS: ну и до кучи - буду рад инфе, как стилизовать input type='number '?
       
    • By garmoni
      Нужно сверстать переключатели input radio в виде блоков. (Размер M, L, XL, XXL)
      Изначально при выборе блока, все работало, менялся цвет. Теперь перестало работать и не могу найти причину. Вставляю часть кода в https://jsfiddle.net/
      все работает. На локальном и хостинге нет. Ссылка на сайт
      http://garmoni.inf.ua/Brandly/
      в самом низу
       
       
       
    • By AlexandrShinkin
      Требуется добавить графику на сайт, чтобы был эффект перекатывания, например, по типу http://www.costa-imaginering.com/. Пробовал добавить javascript, но не выходит.
      sait1.rar
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy