0

HTMLにリンクがあります：

<li class="skip-link-diszlexia"><a class="assistive-text" href="#" title="Diszlexia barát nézet">Diszlexia barát nézet</a></li>

Jquery javascript で別の CSS を呼び出したいと思います。これは、いくつかの div と段落の font-family とスタイルを変更し、同じ要素を 2 回クリックした後、開始に戻ります。私は Javascript プログラマーではありません。Jquery のドキュメントを読み、これを作成しました。diszlexia.css ファイルをデフォルトの style.css と問題なく結合しますが、2 回目のクリック (使用から diszlexia.css を削除したい) が機能しません:

// Jquery CSS switcher (Diszlexia barát nézet)
$(document).ready(function() {
    $(".skip-link-diszlexia").click(function(){
        $(this).append('<link rel="stylesheet" type="text/css" media="all" href="css/diszlexia.css" />');
        return false;
        $(this).append('<link rel="stylesheet" type="text/css" media="all" href="css/diszlexia.css" />').remove();
        return false;
    });
});

.addClass()、.removeClass()、または .css() を使用したくありません。多くの要素で fonf-family を変更し、別の CSS を変更して追加する必要があるためです (カスタム スタイルシートを追加するのと同じように)。 IE) の方がはるかに簡単です。

誰かが私を助けて、くだらないコードを修正できますか?

4

2 に答える 2

1

クリックするたびにその参照を切り替える必要があると思います。適用されている場合は削除し、適用するよりも削除されている場合は、これを試してください：

$(document).ready(function() {
    $(".skip-link-diszlexia").click(function(){
        if($(this).find("link").length <= 0)
            $(this).append('<link rel="stylesheet" type="text/css" media="all" href="css/diszlexia.css" />');
        else
            $(this).find("link").remove();
    });
});

デモ

于 2012-10-07T11:15:44.747 に答える
0

最も簡単な解決策は、body クラスに基づいてフォントを変更する CSS ルールと組み合わせて body タグにaddClassandを使用することです。removeClassリンク タグを削除しても、フォントの変更が取り消されない場合があります

簡略化された CSS の例

div { font-family: arial}
.dislexia div { font-family: verdana}

JS

$(".skip-link-diszlexia").click(function(){  
    $('body').addClass('dislexia');

 })
于 2012-10-07T11:23:06.117 に答える