Форум

Zeka13 · #1 (**permalink**) 28.02.2013, 12:41

Доброго времени суток, я только начинаю разбираться в javascript

Задача: в зависимости от выбора checkbox изменить src нужных картинок

Вот так у меня получилось при помощи jQuery примитивно изменить src

$("img[id^=pic]").attr("src","second.jpg");

Но на самом деле мне нужен следующий обработчик

function filter(type, typeid)
{
	type = document.getElementById(type); // id checkbox
	typeid = document.getElementById(typeid); // id соответствующей картинки
	picsrc = typeid.src.substr(0,typeid.src.length - 4); // убираем окончание если галка стоит
	if (type.checked) typeid.src = picsrc + '-2.jpg'; // нужное окончание если галка стоит
	//возвращаемся к исходным изображениям
	else
	{
		picsrc = typeid.src.substr(0,typeid.src.length - 6); // убираем окончание если галка не стоит
		typeid.src = picsrc + '.jpg'; // нужное окончание если галка не стоит
	}
}

Вопрос только как теперь связать это вместе

Первый вариант работает со всеми нужными картинками, но имеет примитивный обработчик

Второй вариант имеет нужный мне обработчик, но работает только с одной картинкой

Дайте хоть идею, а то я совсем себя исчерпал - опыта нет совсем в JS

Заранее огромное спасибо!

danik.js · #2 (**permalink**) 28.02.2013, 13:22

Тестовый пример в студию. желательно обернуть в [ HTML run] тут html код [ /HTML ]

Zeka13 · #3 (**permalink**) 03.03.2013, 16:32

вот минимальный проект!

в разметке только нужный HTML и два скрипта прямо в HEAD

http://axample.ru.umitest.ru/example/

там есть два чекбокса с подписями - они рабочие

cyber · #4 (**permalink**) 03.03.2013, 17:59

Zeka13,

<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>

<img class="smiles" src="http://s19.rimg.info/036e2161a3108d224768fc56a4d43a8c.gif" new_src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg">
<img class="smiles" src="http://s9.rimg.info/1e05da87819c011d1521b15f58557919.gif" new_src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg">
 <img class="nature" src="http://wallzpoint.com/wp-content/gallery/nature_1/cool-nature-wallpapers-hd-1920x1200.jpg" width ="500" height="500" new_src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Hopetoun_falls.jpg/300px-Hopetoun_falls.jpg">   
    <br>
    <div id="boxes">
       <input type="checkbox" replace_class="smiles" > сменить смайлы
    <br>
    <input type="checkbox" replace_class="nature" > сменить картинку
    </div>
    <script>


      function replace_img(cls){
      
        var imgs = document.getElementsByClassName(cls),
            img,src;
        
        for(var i = 0, leng = imgs.length; i < leng;i++){
        
         img = imgs[i];
          
          src = img.getAttribute("src");
        
          img.src = img.getAttribute("new_src");
          
          img.setAttribute("new_src", src);
        
          
        }
      
       
      }      
      
      var boxs = document.getElementById("boxes");
      
      boxs.onchange = function (e){
        
       var target =  e.target || event.scrElement;
        
       if( target.type != "checkbox") return;
        var cls = target.getAttribute("replace_class");
       
        if(cls.length < 1) return;
       
        replace_img(cls);
      
      }

    </script>

  </body>
</html>

Zeka13 · #5 (**permalink**) 05.03.2013, 13:36

извиняюсь конечно, но ваша страница делает АБСОЛЮТНО тоже самое, что и моя!

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

вы как-будто даже не взглянули на мой код

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

cyber · #6 (**permalink**) 05.03.2013, 13:58

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

Zeka13 · #7 (**permalink**) 10.03.2013, 15:11

спасибо большое, теперь разобрался

Форум

Справочник

Discord чат

Курсы javascript