Question

检查这个fiddle，这里我的表中有一些禁用的行，我用锁来表示禁用。现在，如果你点击锁定，那么doc将被解锁意味着复选框将被启用。我希望在此之后锁定图像应该用打开的锁替换，以便用户可以知道doc没有解锁。我需要toggle选项，例如当用户点击锁定时，图像应该更改为解锁，如果用户点击解锁图像，则应该将其更改为锁定，并且应该禁用复选框。

我正在使用$( this ).remove();删除锁定部分，我需要toggle功能。 I tried the below但它没有用。

  $("a.add_me").toggle(function(){
   $( this ).hide();
   this.src = "http://icons.iconarchive.com/icons/led24.de/led/16/lock-unlock-icon.png";
   }, function() { 
   $( this ).show();
   this.src = "http://media.videolectures.net/rel.1369417430//icons/lock.png";
  });

Answer 1

$("#infoToggler").click(function() {
    $(this).find('img').toggle();
});

JSFIDDLE DEMO

Answer 2

试试这个：

var unlock = 'http://icons.iconarchive.com/icons/led24.de/led/16/lock-unlock-icon.png';
var lock = 'http://media.videolectures.net/rel.1369417430//icons/lock.png';
$("a.add_me").data('lock', true).on("click", function(event) {
    var $this = $(this);
    if ($this.data('lock')) {
        $this.find('img').attr('src', unlock); 
        $this.prev().prop('disabled', false);
        $this.data('lock', false);
    } else {
        $this.find('img').attr('src', lock);
        $this.prev().prop('disabled', true);
        $this.data('lock', true);
    }
});

JSFIDDLE

Answer 3

试试这个，

if($( this ).find('img').hasClass('unlock_image')){
    $( this ).find('img').removeClass('unlock_image').addClass('lock_image');
    $(this).find('img').attr('src','http://icons.iconarchive.com/icons/led24.de/led/16/lock-unlock-icon.png');
    }
    else{
         $(this).find('img').attr('src','http://media.videolectures.net/rel.1369417430//icons/lock.png');
         $( this ).find('img').removeClass('lock_image').addClass('unlock_image');
    };

单击时切换图像和复选框状态

3 个答案: