wie attr() in jQuery wechseln

Question

ich eine einfache Add-Attribute Funktion habe:

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

Meine Frage ist: Wie kann ich dies in einen Knebel drehen, so colspan="6" von dem Elemente auf dem nächsten Klick entfernt ?

Answer 1

$('.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.

Siehe Antwort von @RienNeVaPlus unten für eine elegantere Lösung.

Answer 2

Dies wäre ein guter Ort sein closure ein verwenden:

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

Die toggled Variable innerhalb des definierten Bereichs nur existieren, und können den Zustand des Toggle von einem Click-Ereignis zu speichern, verwendet werden, um der nächste.

Answer 3

Wenn Sie etwas Phantasie:

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

Working Fiddle

Answer 4

Für Nur-Lese/deaktiviert und andere Attribute mit Wahr/Falsch-Werte

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

Answer 5

Für das, was es wert ist.

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

Beachten Sie, dass Sie eine Schließung an .prop() übergeben können und eine Überprüfung pro Element durchführen können. Aber in diesem Fall spielt es keine Rolle, es ist nur eine Massenumschaltung.

Answer 6

Ich weiß, das alt ist und beantwortet, aber ich hatte vor kurzem dies zu implementieren und entschied 2 einfachen jQuery-Plugins zu machen, die für die Interessenten

Nutzung helfen können:

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

1 - Schaltet die gesamte Attribut unabhängig davon, ob der ursprüngliche Wert nicht dem von Ihnen angegebenen entspricht.

2 - Schaltet den Wert des Attributs zwischen den 2 angegebenen Werten um.

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

Dies ist, wie Sie es im ursprünglichen Beispiel verwenden würden:

für

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