2

私はJQueryを始めたばかりなので、これが簡単な質問である場合は事前にお詫び申し上げます.

印刷プレビューに関する A List Apart の記事を使用して、作業中の Web アプリケーションでライブの印刷プレビューを取得しようとしています。十分に機能するようになりましたが、現在、コードを内部的に見えるようにリファクタリングしようとしています。私は現在、マイクロコピーのブロックを表示するためのメソッドと、それを削除するためのメソッドの 2 つのセットを持っています。問題の要素の適切な値を切り替える単一のセットがあればいいのにと思います。

CSS の場合、非印刷プレビュー シートを無効にして印刷プレビュー シートを有効にする、またはその逆を意味します。私のマイクロコピーの場合、これはではなくに設定displayすることを意味し、逆もまた同様です。blocknone

少なくともスタイルシートのリンクについては、関連するlink要素のコレクションを単純にループして設定disabledしたいのです!disabledが、その方法がわかりません。私は jQuery を使用していますが、その抽象化レベルを下回ることには反対しません。

要素に対してそれを行う方法がわかれば、ソリューションを拡張して、マイクロコピー divlinkの属性も切り替えることができるはずです。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

4 に答える 4

5

toggle次の関数で表示/非表示を切り替えることができます。

function removePrintPreviewMicrocopy() {
    $("div[id='print-preview-microcopy']").toggle();
}
于 2009-12-15T16:01:32.583 に答える
3

disabledHTML 属性は技術的にブール値ではありません。"" または "disabled" のいずれかの値を持つ列挙型です。

ただし、disabledDOM プロパティはブール値です。

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

また、ID セレクターが複雑すぎる

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

する必要があります

$("#print-preview-microcopy")
于 2009-12-15T16:05:00.373 に答える
3

要素の場合、属性を次のように<link>切り替えることができます:disabled

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

これは、その属性が特に要素の読み取り/書き込みbooleanプロパティであるため機能します。<link>

toggle()divについては、他の人が提案したように使用できます。

于 2009-12-15T16:07:26.113 に答える
1

もう 1 つのオプションは、show() および hide() メソッドを使用することです。

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

または、必要に応じて素敵なフェードを使用することもできます。

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

「#selector」は、問題の div ID または html タグに置き換える必要があることに注意してください。

于 2009-12-15T16:06:44.800 に答える