Переключить туда и обратно
Всем доброе время суток.
Есть задача, при клике менять картинку одну на другую. В коде ниже все работает и при клике картинка меняется, но только один раз. Как сделать чтобы картинка менялась каждый раз при клике по ней. Картинки выводятся в цыкле. <span class="visible"><img src="../img/site/visible.png" title="222" /></span> <span class="visible"><img src="../img/site/visible.png" title="222" /></span> <span class="visible"><img src="../img/site/visible.png" title="222" /></span> <span class="visible"><img src="../img/site/visible.png" title="222" /></span> <span class="visible"><img src="../img/site/visible.png" title="222" /></span> $('.visible img').each(function() { $(this).click(function (){ var url = '../img/site/invisible.png';//новое фото var title = '111';//новый тайтл для фото $(this).attr('src', url).attr('title', title); }); }); |
Цитата:
для опыта можешь попробовать реализовать/подсмотреть как реализован http://api.jquery.com/toggle-event/ , не забудь обратить внимание на слова Цитата:
|
:nono:
plugin toggle for jquery или почему не работает toggle <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $.fn.oldtoggle = function() { var b = arguments; return this.each(function(i, el) { var a = function() { var c = 0; return function() { b[c++ % b.length].apply(el, arguments) } }(); $(el).click(a) }) }; $(function() { $('.visible img').oldtoggle(function() { this.src = 'http://javascript.ru/forum/images/smilies/dance3.gif'; this.title = '111' }, function() { this.src = 'http://javascript.ru/forum/images/smilies/victory.gif'; this.title = '222'; }) }); </script> </head> <body> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="222" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="222" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="222" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="222" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="222" /></span> </body> </html> |
:lol:
<style> .toggle{position: reltive; display:inline-block;} .toggle input { width:100%; height:100%; margin:0; padding:0; position:absolute; z-index:2; cursor:pointer; opacity:0; filter:alpha(opacity=0); } .toggle>img{display:none;} .toggle input:checked + img { display:block; } .toggle input:checked ~ span { display:none; } </style> <span class="toggle"> <input type="checkbox"/> <img src="http://javascript.ru/forum/images/smilies/dance3.gif" title="222" /> <span><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="222" /></span> </span> <span class="toggle"> <input type="checkbox"/> <img src="http://javascript.ru/forum/images/smilies/dance3.gif" title="222" /> <span><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="222" /></span> </span> <span class="toggle"> <input type="checkbox"/> <img src="http://javascript.ru/forum/images/smilies/dance3.gif" title="222" /> <span><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="222" /></span> </span> |
каждому объекту по toggle-у :D
<script> Object.prototype.toggle = function () { var args = arguments; var length = args.length; var counter = this.counter; this.addEventListener("click", function () { if ( !counter || counter == length ) counter = 0; args[counter++](); }); } document.addEventListener("DOMContentLoaded", function () { var images = document.querySelectorAll(".visible img"); Array.prototype.map.call(images, function (img) { img.toggle( function () { img.src = 'http://javascript.ru/forum/images/smilies/dance3.gif'; img.title = '111' }, function () { img.src = 'http://javascript.ru/forum/images/smilies/write.gif'; img.title = '222'; }, function () { img.src = 'http://javascript.ru/forum/images/smilies/victory.gif'; img.title = '333'; } ); }); }); </script> <body> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="333" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="333" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="333" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="333" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="333" /></span> |
bes,
Poznakomlus, :dance: |
bes,
:write: this <script> Object.prototype.toggle = function () { var args = arguments; var length = args.length; var counter = 0; this.addEventListener("click", function () { if (counter == length ) counter = 0; args[counter++].call(this); }); } document.addEventListener("DOMContentLoaded", function () { var images = document.querySelectorAll(".visible img"); Array.prototype.map.call(images, function (img) { img.toggle( function () { this.src = 'http://javascript.ru/forum/images/smilies/dance3.gif'; this.title = '111' }, function () { this.src = 'http://javascript.ru/forum/images/smilies/write.gif'; this.title = '222'; }, function () { this.src = 'http://javascript.ru/forum/images/smilies/victory.gif'; this.title = '333'; } ); }); }); </script> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="333" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="333" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="333" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="333" /></span> <span class="visible"><img src="http://javascript.ru/forum/images/smilies/victory.gif" title="333" /></span> |
рони, да, и = this.counter там ни к чему :)
|
bes,
исправил counter |
Спасибо, помогло.
|
Часовой пояс GMT +3, время: 06:04. |