如何在jquery中切换attr()

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

工作小提琴

Answer 2

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

这是一个工作小提琴的例子.

请参阅下面的@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

这将是使用闭包的好地方：

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

该toggled变量将仅存在于定义的范围内，并可用于存储从一个单击事件到下一个单击事件的切换状态。