jquery - 如何在 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;
});

Working Fiddle

_{ES6 语法（2021）：}

$('.list-sort').attr('colspan', (_, attr) => 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

对于只读/禁用和其他具有真/假值的属性

$(':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变量将仅存在于定义的范围内，并且可用于存储从一个单击事件到下一个单击事件的切换状态。

Answer 6

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

Answer 7

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

Answer 8

这个答案是计算调用removeAttr时第二个参数没用！（就像发布此答案时一样）否则不要使用它！

无法击败RienNeVaPlus 的干净答案，但它也可以完成这项工作，它基本上是一种更压缩的方式来执行三元运算：

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

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

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