javascript - 在img标签中添加一个新值来检查它是否是用Javascript点击的？

Question

我正在尝试制作带有重复图像的 map ，并且我还希望 map 上的图 block 可单击。在这里，我编写了一个脚本，但我在取消选中选中的图像时遇到问题。

http://jsbin.com/aruge/edit

请帮忙。

Answer 1

这是您的需求的 jQuery 版本演示: http://jsbin.com/utepi3

  $(function() {
    var counter = 0;
    for(var i = 0;i< 5; i++) {
      for(var k = 0; k < 5; k++) {
        var img = $('<img />', {
          id : 'i'+i+'k'+k,
          src: 'http://mclightning.com/gr.jpg',
          width : 30,
          height : 30,
          alt : 'test',
          value : '0'
        }).appendTo('body').wrap('<div class="hello"/>');
        $('.hello').eq(counter).css({
          position : 'absolute',
          left: i*30,
          top : k*30,
          cursor : 'pointer'
        });
        counter++;
      }
    }
    $('img').hover(function() {
      if($(this).attr('value') != 1) {
        $(this).attr('src', 'http://mclightning.com/grover.jpg');
      }  
    },function() {
      if($(this).attr('value') != 1) {
        $(this).attr('src', 'http://mclightning.com/gr.jpg');
      }  
    }).bind('click',function() {
      if($(this).attr('value') !='1' ) {
        $(this).attr('src', 'http://mclightning.com/grclick.jpg');
        $(this).attr('value','1');
      }else if($(this).attr('value') !='0' ) {
        $(this).attr('src', 'http://mclightning.com/gr.jpg');
        $(this).attr('value','0');
      }  
    });
  });  

PS:重新点击时添加图像切换器 =)