Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Переключить туда и обратно (https://javascript.ru/forum/jquery/52361-pereklyuchit-tuda-i-obratno.html)

Kolyl 15.12.2014 20:33
Переключить туда и обратно
 
Всем доброе время суток.
Есть задача, при клике менять картинку одну на другую.
В коде ниже все работает и при клике картинка меняется, но только один раз.
Как сделать чтобы картинка менялась каждый раз при клике по ней.
Картинки выводятся в цыкле.

<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);
    });
});

bes 15.12.2014 21:35
Цитата:
Сообщение от Kolyl
Как сделать чтобы картинка менялась каждый раз при клике по ней.
поставить условие догадаться проблематично?
для опыта можешь попробовать реализовать/подсмотреть как реализован http://api.jquery.com/toggle-event/ , не забудь обратить внимание на слова
Цитата:
version deprecated: 1.8, removed: 1.9

рони 15.12.2014 22:43
: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>

Vlasenko Fedor 15.12.2014 23:33
: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>

bes 16.12.2014 00:00
каждому объекту по 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>

рони 16.12.2014 00:31
bes,
Poznakomlus,
:dance:

рони 16.12.2014 00:43
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>

bes 16.12.2014 00:52
рони, да, и = this.counter там ни к чему :)

рони 16.12.2014 01:03
bes,
исправил counter

Kolyl 16.12.2014 10:01
Спасибо, помогло.


Часовой пояс GMT +3, время: 20:19.