如何更改此div在不同页面上的字体系列？

Question

嗨，你能告诉我如何改变div .Actually的字体系列吗?我有一个改变我的application.After字体系列的选项，改变字体系列它应该反映在所有的application.But上，更重要的是一个div (目前不同的页面)有一些ID和class.How来做到这一点。

    $(document).on('change', '#select-choice-1', function() {


     var fontFamily = $(this).val() ; 
      var classesToChange = ".ui-body-c,.ui-btn-text,.ui-li-divider,.ui-header,.ui-li,.panel,.realtimeContend_h";
      $(classesToChange).css("font-family", fontFamily);


    });


<div data-role="fieldcontain">
                        <label for="text-12" style="text-align:left;margin-left: 0px;">Font Family:</label>
                        <select name="select-choice-1" id="select-choice-1">
                            <option>Select Font family</option>
                           <option value="AntiquaAntiqua">AntiquaAntiqua</option>
                            <option value="Arial">Arial </option>
                           <option value="Times New Roman">Times New Roman</option>
                             <option value="Corbel">Corbel</option>
                              <option value="Garamond">Garamond</option>

                        </select>
                    </div>

Div on other page

 <div id="realTimeContents" class="realtimeContend_h">

sdsdfjdsjfkldf;gkd;sklfdfgkldlfg;ld;'gl'dlfgsjkkjkldl;sdf;dfs;;dsfkksdll;;sdkshfhsdfjsieiryidsmfnksdjf
sdsdfjdsjfkldf;gkd;sklfdfgkldlfg;ld;'gl'dlfgsjkkjkldl;sdf;dfs;;dsfkksdll;;sdkshfhsdfjsieiryidsmfnksdjf
sdsdfjdsjfkldf;gkd;sklfdfgkldlfg;ld;'gl'dlfgsjkkjkldl;sdf;dfs;;dsfkksdll;;sdkshfhsdfjsieiryidsmfnksdjf
sdsdfjdsjfkldf;gkd;sklfdfgkldlfg;ld;'gl'dlfgsjkkjkldl;sdf;dfs;;dsfkksdll;;sdkshfhsdfjsieiryidsmfnksdjf
sdsdfjdsjfkldf;gkd;sklfdfgkldlfg;ld;'gl'dlfgsjkkjkldl;sdf;dfs;;dsfkksdll;;sdkshfhsdfjsieiryidsmfnksdjf
                            </div>  


$(document).on('change', '#select-choice-2', function() {
alert("dd")
    var style;
    var font = $(this).val();
    if ($('head').find('style.font').length === 0) {
        style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
        $('head').append(style);
        $('body *').addClass('font');
    } else {
        $('body *').removeClass('font');
        $('style.font').empty();
        style = '.font { font-size: ' + font + 'px !important; }';
        $('style.font').append(style);
       }


});

Answer 1

您可以使用全局jquery对象并存储用户选择的内容，然后在加载其他页面时应用用户在上一页上选择的内容示例:在第一页上放置以下内容

$.selected = $("#select option:selected").val()

现在，在另一个页面上，将此脚本放入页面div

<script>    
    $("#div").css('font-family',$.selected);
</scrpit>

这就是我如何存储和移动信息从一个页面到另一个页面，因为使用jquery mobile一切都是动态的，我只是查询服务器上的数据，我使用jquery全局对象并在那里存储信息。

Answer 2

这将不会像您期望的那样工作。Javascript是基于客户端的，这意味着您所做的更改仅反映在当前屏幕上正在发生的事情上。

如果你想有一个网站能够记住你的访问者有什么字体系列，设置，历史等，你必须使用服务器端的语言和编程。

这可以很容易地完成，例如，当你改变字体时，通过执行一个ajax-call来实现PHP。在ajax-call执行的脚本中，您可以设置cookie或session-value，然后在每次通过输出原始css或添加/切换类来呈现页面时使用此值来反映所需的字体系列。

Answer 3

因此，如果我理解正确的话，问题是您想要在整个应用程序范围内更改字体。问题是css将定义浏览器会话中的字体。仅仅在文档中更改一次并不会在整个浏览器会话中刷新它，这意味着当用户刷新页面或单击链接转到另一个页面时，将使用原始css，而不是他们的更改。

有很多方法可以做到这一点：

1) cookies 2)会话变量服务器端3)查询行变量4)加上其他变量...

可以工作的东西的示例代码。为了简单起见，我使用的是carhart jquery cookie插件。(请参阅此处https://github.com/carhartl/jquery-cookie)：

$(document).on('change', '#select-choice-2', function() {
alert("dd")
    var style;
    var font = $(this).val();
    if ($('head').find('style.font').length === 0) {
        style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
        $('head').append(style);
        $('body *').addClass('font');


    } else {
        $('body *').removeClass('font');
        $('style.font').empty();
        style = '.font { font-size: ' + font + 'px !important; }';
        $('style.font').append(style);
       }

    //additional code
       $.cookie("font", font);
});

$(document).ready(function(){

if($.cookie("font"))
{
   var font = $.cookie("font");
   style = $('<style class="font">.font { font-size: ' + font + 'px !important; }</style>');
            $('head').append(style);
}

});

我不确定这是否是你想要的工作方式，但还是有一些类似的东西。基本上，每次加载DOM时，它都需要查看是否设置了字体cookie。如果是，则设置存储在cookie中的字体。

还有许多其他方法(以及探索更好的方法)可以做到这一点，但这只是一个简单的示例，让您开始。希望这能有所帮助。