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 和段落的字体系列和样式，然后在第二次单击同一元素后，返回开始。我根本不是 Javascript 程序员，我阅读了 Jquery 文档并创建了这个。它将 diszlexia.css 文件与默认 style.css 结合起来没有问题，但是第二次单击（我想从使用中删除 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 标记上使用addClass和removeClass结合 css 规则，这些规则将根据 body 类更改字体。删除链接标签可能不会撤消字体更改

简化的 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 回答