Question

我有一个简单的添加属性函数：

$(".list-toggle").click(function() {
    $(".list-sort").attr('colspan', 6);
});

我的问题是：如何将其转换为切换，以便在下次点击时从元素中移除colspan="6"？

Answer 1

如果你感觉很好看：

$('.list-sort').attr('colspan', function(index, attr){
    return attr == 6 ? null : 6;
});

<强> Working Fiddle

Answer 2

$('.list-toggle').click(function() {
    var $listSort = $('.list-sort');
    if ($listSort.attr('colspan')) {
        $listSort.removeAttr('colspan');
    } else {
        $listSort.attr('colspan', 6);
    }
});

Here's a working fiddle example.

请参阅下面@RienNeVaPlus的答案，以获得更优雅的解决方案。

Answer 3

对于readonly / disabled和其他具有true / false值的属性

$(':submit').attr('disabled', function(_, attr){ return !attr});

Answer 4

我知道这已经过时了并且已经回答但是我最近不得不实现这个并且决定制作2个简单的jQuery插件，可能对那些感兴趣的人有所帮助

用法：

// 1
$('.container').toggleAttr('aria-hidden', "true");
// 2
$('.container').toggleAttrVal('aria-hidden', "true", "false");

1 - 无论原始值与您提供的值不匹配，都要切换整个属性。

2 - 在2个提供的值之间切换属性的值。

 // jquery toggle whole attribute
  $.fn.toggleAttr = function(attr, val) {
    var test = $(this).attr(attr);
    if ( test ) { 
      // if attrib exists with ANY value, still remove it
      $(this).removeAttr(attr);
    } else {
      $(this).attr(attr, val);
    }
    return this;
  };

  // jquery toggle just the attribute value
  $.fn.toggleAttrVal = function(attr, val1, val2) {
    var test = $(this).attr(attr);
    if ( test === val1) {
      $(this).attr(attr, val2);
      return this;
    }
    if ( test === val2) {
      $(this).attr(attr, val1);
      return this;
    }
    // default to val1 if neither
    $(this).attr(attr, val1);
    return this;
  };

这是您在原始示例中使用它的方式：

$(".list-toggle").click(function() {
    $(".list-sort").toggleAttr('colspan', 6);
});

Answer 5

这是使用closure的好地方：

(function() {
  var toggled = false;
  $(".list-toggle").click(function() {
    toggled = !toggled;
    $(".list-sort").attr("colspan", toggled ? 6 : null);
  });
})();

toggled变量只存在于定义的范围内，可用于存储从一次点击事件到下一次事件的切换状态。

Answer 6

它的价值。

$('.js-toggle-edit').on('click', function (e) {
    var bool = $('.js-editable').prop('readonly');
    $('.js-editable').prop('readonly', ! bool);
})

请记住，您可以将闭包传递给.prop（），并执行每个元素检查。但在这种情况下，它并不重要，它只是一个大规模的切换。

Answer 7

$(".list-toggle").click(function() {
    $(this).hasAttr('colspan') ? 
        $(this).removeAttr('colspan') : $(this).attr('colspan', 6);
});

Answer 8

$(".list-toggle").click(function() {
    $(this).attr('colspan') ? 
    $(this).removeAttr('colspan') : $(this).attr('colspan', 6);
});

Answer 9

此答案计数为调用removeAttr时第二个参数无用！ （就像发布此答案的时间一样） 请勿使用此功能！

无法胜过RienNeVaPlus's clean answer，但它也能胜任，基本上是执行三元运算的一种更压缩的方式：

$('.list-sort')[$('.list-sort').hasAttr('colspan') ? 
    'removeAttr' : 'attr']('colspan', 6);

在这些情况下，当您需要多次使用引用时，可以使用额外的变量：

var $listSort = $('.list-sort'); 
$listSort[$listSort.hasAttr('colspan') ? 'removeAttr' : 'attr']('colspan', 6);

如何在jquery中切换attr（）

10 个答案: