Question

基本上，我一直无法找到一种方法来执行以下操作.click（）不止一次工作。我的目的是让重复点击.gen2类将继续.remove（）当前的.gen2图像并用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如下。因为.gen1和.gen2的位置都设置为绝对值，所以它们重叠，以便每个被删除并用.append（）逐步替换，形成一个新图像。

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

问题是第一次点击后（）;该功能不再运行。我无法理解......

谢谢！

Answer 1

使用对象存储图像来源
仅将图像源URL存储在数组对象中。不要添加HTML
在图片上使用data-自定义属性来存储自定义数据
不要在DOM中删除和添加HTML元素。更新元素的src值。
在元素

公共类来绑定事件

注意：由于图像是随机挑选的，因此有可能在点击时图像不会改变，即图像已更改但下一张图像与之前的图像相同。

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>

取自http://www.ggdesignsembroidery.com/

Answer 2

您想要动态添加元素，因此您需要使用 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);
  });
});

Answer 3

试试这个：

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

Answer 4

我认为这是一种更好的方法，您可以将两者与更通用的选择器结合起来，例如$('.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);
});});

Answer 5

您需要重新绑定click事件，因为删除图像时删除了初始绑定。

希望此代码有帮助

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

如何使.click（）函数可重用

5 个答案: