Как я могу программно перевернуть значение атрибута элемента, используя JQuery? - PullRequest
Новая
       21

Как я могу программно перевернуть значение атрибута элемента, используя JQuery?

2 голосов
/ 15 декабря 2009

Я только начинаю изучать JQuery, поэтому заранее прошу прощения, если это простой вопрос.

Я работаю со статьей A List Apart по предварительным просмотрам печати , чтобы попытаться получить предварительные просмотры печати в веб-приложении, над которым я работаю. Я получил его, чтобы работать удовлетворительно, но сейчас я пытаюсь реорганизовать мой код так, как я думаю, он должен выглядеть внутренне. В настоящее время у меня есть 2 набора методов, один для отображения блока микроскопии и другой для его удаления. Я бы предпочел просто иметь один набор, который переключает соответствующие значения рассматриваемых элементов.

Для CSS это означает отключение листов без предварительного просмотра и включение предварительного просмотра, и наоборот. Для моей микроскопии это означает установку display на block вместо none, и наоборот.

По крайней мере, для ссылок на таблицу стилей, я хочу просто перебрать коллекцию связанных элементов link и установить disabled в !disabled, но я не могу понять, как это сделать. Я использую jQuery, но я не против того, чтобы опуститься ниже этого уровня абстракции.

Полагаю, что когда я знаю, как это сделать для элементов link, я смогу расширить решение, чтобы также включить атрибут display в блоке микроскопии.

Вот мои текущие функции для любопытных: 

function printPreview() {
    $("link[rel*='style'][media!='print'").attr("disabled", true);
    $("link[rel*='style'][title='print preview']").attr("disabled", false);
    addPrintPreviewMicrocopy();
}

function addPrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").css({'display':'block'});
}

function normalView() {
    $("link[rel*='style'][media!='print'").attr("disabled", false);
    $("link[rel*='style'][title='print preview']").attr("disabled", true);
    removePrintPreviewMicrocopy();
}

function removePrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").css({'display':'none'});
}

Заранее спасибо!

Спасибо всем. Вот мое окончательное решение: 

function toggleView() {
    $("link[rel*='style'][media!='print']").each( function() {
        this.disabled = !this.disabled;
    });
}

Оказывается, мне даже не нужно было переключать div, как это делали одни стилизы.

Ответы [ 4 ]

5 голосов
/ 15 декабря 2009

Вы можете включить / отключить отображение с помощью функции toggle: 

function removePrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").toggle();
}
3 голосов
/ 15 декабря 2009

Для <link> элементов вы можете переключать их атрибут disabled с помощью: 

$('link[rel*=style]').each(function(){
  this.disabled = !this.disabled
})

Это работает, потому что этот атрибут, в частности, является свойством boolean для чтения / записи для <link> элементов.

Что касается div, вы можете использовать toggle(), как предлагали другие.

3 голосов
/ 15 декабря 2009

Атрибут disabled HTML технически не является логическим. Это может быть перечислимо со значением "" или "отключено".

Свойство disabled DOM, однако, является логическим значением. 

$('selector').attr( "disabled", "" );
$('selector').each( function() { this.disabled = false; } );

Кроме того, ваши селекторы ID слишком сложны 

$("div[id='print-preview-microcopy']")

должно быть 

$("#print-preview-microcopy")
1 голос
/ 15 декабря 2009

Другой вариант - использовать методы show () и hide (). 

$("#selector").show();
$("#selector").hide();

Или вы можете использовать хорошее затухание, если хотите. 

$("#selector").fadeIn("slow");
$("#selector").fadeOut("slow");

Следует отметить, что "#selector" должен быть переназначен с указанным тегом div id или html.

...