Geek Answers Handbook

How to make .click () function reusable

Essentially, I could not find a way to do the following .click () more than once. My intention is to repeat .gen2 class clicks constantly. Delete () the current .gen2 image and replace it with a randomly selected image from myArray.

$(document).ready(function(){ $('.gen2').click(function(){ $('.gen2').remove(); var myArray = ['<img class="gen2" src="images/bottom/chinchilla.png" />', '<img class="gen2" src="images/bottom/bird.png" />', '<img class="gen2" src="images/bottom/bluejay.png" />', '<img class="gen2" src="images/bottom/walrus.png" />']; var rand = myArray[Math.floor(Math.random() * myArray.length)]; $('.change').append(rand); }); $('.gen1').click(function(){ $('.gen1').remove(); var array = ['<img class="gen1" src="images/top/raven.png" />', '<img class="gen1" src="images/top/boar.png" />', '<img class="gen1" src="images/top/trex.png" />']; var rand = array[Math.floor(Math.random() * array.length)]; $('.change').append(rand); });});

HTML is as follows. because the positions of both .gen1 and .gen2 are set to absolute, they overlap, so when each of them is deleted and replaced by .append (), a new image is formed.

 <body> <div class="change"> <img class="gen1" src="images/top/raven.png" /> <img class="gen2" src="images/bottom/chinchilla.png" /> </div>

the problem is that after the first click (); the function no longer works. I can’t understand how ..

Thanks!

+4
source share
5 answers
  • Use Object to Store Image Sources
  • Save only the source image URL in an array object. Do not add HTML
  • Use data- custom image attribute to store user data
  • Do not remove or add HTML elements to the DOM. Update the src value of the item.
  • Add a Common class for event binding for elements

Note. . When the image is randomly selected, there is a chance that the image may not change when clicked, that is, the image will be changed and the next image will be the same as the previous one.

 var obj = { 'gen1': ['', 'images/top/boar.png', 'images/top/trex.png' ], 'gen2': ['http://www.ggdesignsembroidery.com/store/images/uploads/Chubby1.jpg', 'http://www.ggdesignsembroidery.com/store/images/uploads/Chubby2.jpg', 'http://www.ggdesignsembroidery.com/store/images/uploads/Chubby3.jpg', 'http://www.ggdesignsembroidery.com/store/images/uploads/Chubby4.jpg' ] }; $('.change').on('click', '.gen', function() { var myArray = obj[$(this).data('target')]; var rand = myArray[Math.floor(Math.random() * myArray.length)]; $(this).attr('src', rand); }); 
 img { height: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <div class="change"> <img class="gen1 gen" src="images/top/raven.png" data-target="gen1" /> <!-- ^^^: Common Class ^^^^^^^^^^^: Custom Attribute --> <img class="gen2 gen" src="http://www.ggdesignsembroidery.com/store/images/uploads/Chubby1.jpg" data-target="gen2" /> <!-- ^^^: Common Class ^^^^^^^^^^^: Custom Attribute --> </div>

Images made from http://www.ggdesignsembroidery.com/

+1
source

You want to listen to dynamically added elements, so you need to use event delegation

 $(document).ready(function() { var myArray = ['<img class="gen2" src="images/bottom/chinchilla.png" />', '<img class="gen2" src="images/bottom/bird.png" />', '<img class="gen2" src="images/bottom/bluejay.png" />', '<img class="gen2" src="images/bottom/walrus.png" />' ], array = ['<img class="gen1" src="images/top/raven.png" />', '<img class="gen1" src="images/top/boar.png" />', '<img class="gen1" src="images/top/trex.png" />' ]; $('.change').on('click', '.gen2', function() { $('.gen2').remove(); var rand = myArray[Math.floor(Math.random() * myArray.length)]; $('.change').append(rand); }).on('click', '.gen1', function() { $('.gen1').remove(); var rand = array[Math.floor(Math.random() * array.length)]; $('.change').append(rand); }); });
0
source

Try the following:

 $(document).ready(function(){ $(document.body).on('click','.gen2',function(){ //your code here }); $(document.body).on('click','.gen1',function(){ //your code here }); });
0
source

I think this is a better approach, and maybe you can combine the two with a more general selector like $('.change>img')

 $(document).ready(function(){ $('.gen2').click(function(){ var myArray = ["images/bottom/chinchilla.png" ,"images/bottom/bird.png" ,"images/bottom/bluejay.png","images/bottom/walrus.png" ]; var rand = myArray[Math.floor(Math.random() * myArray.length)]; $(this).attr("src",rand); }); $('.gen1').click(function(){ var array = ["images/top/raven.png" ,"images/top/boar.png","images/top/trex.png"]; var rand = array[Math.floor(Math.random() * array.length)]; $(this).attr("src",rand); });});
0
source

You will need to reset the click event because the original binding was removed when the image was deleted.

Hope this code helps

 $(document).ready(function(){ $('.gen2').click(gen2); $('.gen1').click(gen1); function gen2(){ $('.gen2').remove(); var myArray = ['<img class="gen2" src="images/bottom/chinchilla.png" />', '<img class="gen2" src="images/bottom/bird.png" />', '<img class="gen2" src="images/bottom/bluejay.png" />', '<img class="gen2" src="images/bottom/walrus.png" />']; var rand = myArray[Math.floor(Math.random() * myArray.length)]; $('.change').append(rand); $('.gen2').click(gen2); } function gen1(){ $('.gen1').remove(); var array = ['<img class="gen1" src="images/top/raven.png" />', '<img class="gen1" src="images/top/boar.png" />', '<img class="gen1" src="images/top/trex.png" />']; var rand = array[Math.floor(Math.random() * array.length)]; $('.change').append(rand); $('.gen1').click(gen1); } });
0
source

More articles:


All Articles