Форум

Kolyl · #1 (**permalink**) 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 · #2 (**permalink**) 15.12.2014, 21:35

Сообщение от Kolyl

Как сделать чтобы картинка менялась каждый раз при клике по ней.

поставить условие догадаться проблематично?
для опыта можешь попробовать реализовать/подсмотреть как реализован http://api.jquery.com/toggle-event/ , не забудь обратить внимание на слова

Цитата:

version deprecated: 1.8, removed: 1.9

рони · #3 (**permalink**) 15.12.2014, 22:43

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 · #4 (**permalink**) 15.12.2014, 23:33

<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 · #5 (**permalink**) 16.12.2014, 00:00

каждому объекту по toggle-у

<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>

рони · #6 (**permalink**) 16.12.2014, 00:31

bes,
Poznakomlus,

рони · #7 (**permalink**) 16.12.2014, 00:43

bes,

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 · #8 (**permalink**) 16.12.2014, 00:52

рони, да, и = this.counter там ни к чему

рони · #9 (**permalink**) 16.12.2014, 01:03

bes,
исправил counter

Kolyl · #10 (**permalink**) 16.12.2014, 10:01

Спасибо, помогло.

Форум

Справочник

Discord чат

Курсы javascript