Обработать javascript''ом элементы по регепсу
Доброго времени суток, я только начинаю разбираться в 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 Заранее огромное спасибо! |
Тестовый пример в студию. желательно обернуть в [ HTML run] тут html код [ /HTML ]
|
вот минимальный проект!
в разметке только нужный HTML и два скрипта прямо в HEAD http://axample.ru.umitest.ru/example/ там есть два чекбокса с подписями - они рабочие |
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>
|
извиняюсь конечно, но ваша страница делает АБСОЛЮТНО тоже самое, что и моя!
мне нужно, чтобы ваши смайлы поменялись не на одну и тужу картинку, а каждый смайл изменился на заданную картинку и эти картинки должны быть разные! вы как-будто даже не взглянули на мой код вы просто повторили его, заменив jQuery на циклы, хотя jQuery мне кажется намного более элегантным решением в данном случае |
Zeka13, а вы не пробывли включать логику? - просто можно логически прийти к тому что, в атрибут new _src можно записывать ссылки на разные картинки.
|
спасибо большое, теперь разобрался
|
| Часовой пояс GMT +3, время: 09:09. |