как переключить attr() в jquery

Ответ 1

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

Вот пример рабочего скрипта.

См. Ответ от @RienNeVaPlus ниже для более элегантного решения.

Ответ 2

Если вы чувствуете фантазию:

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

Рабочий скрипт

Ответ 3

Для readonly/disabled и других атрибутов с истинными/ложными значениями

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

Ответ 4

Я знаю, что это старый и ответил, но мне недавно пришлось это реализовать и решил сделать 2 простых плагина jQuery, которые могли бы помочь заинтересованным

Применение:

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

1 - Переключает весь атрибут независимо от того, совпадает ли исходное значение с тем, которое вы указали.

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

Ответ 5

Это было бы хорошим местом для использования закрытия:

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

toggled переменная будет существовать только внутри определенной области и может использоваться для хранения состояния переключения из одного события клика в следующий.

Ответ 6

За что это стоит.

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

Имейте в виду, что вы можете передать закрытие на.prop() и выполнить проверку каждого элемента. Но в этом случае это не имеет значения, это просто массовый переключение.

Ответ 7

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

Ответ 8

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