0

fontオンラインプレビュー用に小さな Web アプリケーションをセットアップしようとしています。今まではすべてうまくいっています。選択ボックス (正常に動作)、テキスト領域のテスト (正常に動作)、font-sizer (正常に動作)、太字、イタリックのチェックボックス (正常に動作) を作成しました。これには、フォントのリストが含まれています。選択リストからフォントの 1 つを選択すると、ページ上のすべてのコンテンツ (事前定義されたテキスト) が変更され、それで問題ありませんが、迅速な変更のために矢印 (次と前) を追加することにしましたが、これも機能しますが、一部の要素は変更されませんボタンクリック。

実際の問題は何ですか？

選択リストからフォントを選択するとすべてが変更されますが、これらのボタンを次/前の H1 に使用すると、ページの見出しとページのタイトルにフォント名を表示する必要があるため、ページのタイトルを変更したくありません。

ここにあります：http://jsfiddle.net/S8PwY/

誰かがこのスクリプトをチェックして、どこに問題があるか教えてもらえますか:

$(document).ready(function() {
$(".fontpicker").change(function() {
    $font = $('.fontpicker option:selected').val();
    $('.font_preview').css('fontFamily', $font);
});
$(".fontpicker").change(function() {
    $font = $('.fontpicker option:selected').val();
    $('.name').css('fontFamily', $font);
});



//min font size
var min = 10;

//max font size
var max = 60;

//grab the default font size
var reset = $('textarea').css('fontSize');

//font resize these elements
var elm = $('textarea');

//set the default font size and remove px from the value
var size = str_replace(reset, 'px', '');

//Increase font size
$('a.fontSizePlus').click(function() {

    //if the font size is lower or equal than the max value
    if (size <= max) {

        //increase the size
        size++;

        //set the font size
        elm.css({
            'fontSize': size
        });
    }

    //cancel a click event
    return false;

});

$('a.fontSizeMinus').click(function() {

    //if the font size is greater or equal than min value
    if (size >= min) {

        //decrease the size
        size--;

        //set the font size
        elm.css({
            'fontSize': size
        });
    }

    //cancel a click event
    return false;

});

//Reset the font size
$('a.fontReset').click(function() {

    //set the default font size    
    elm.css({
        'fontSize': reset
   }



$('.selector').click(function() {
    var checked = $(this).is(':checked');
    var value = $(this).attr('value');
    if (checked) {
        $('.font_preview, textarea').addClass(value);
    } else {
        $('.font_preview, textarea').removeClass(value);
    }
});

$("#next").click(function() {
    $("#mycars").val($("#mycars > option:selected").next().val());
    $font = $('.fontpicker option:selected').val();
    $('.font_preview').css('fontFamily', $font);
    $('.name').css('fontFamily', $font);

});

$("#prev").click(function() {
    $("#mycars").val($("#mycars > option:selected").prev().val());
    $font = $('.fontpicker option:selected').val();
    $('.font_preview').css('fontFamily', $font);
    $('.name').css('fontFamily', $font);
});

 $("select").change(function () {
      var str = "";
      $("select option:selected").each(function () {
            str += $(this).text() + " ";
          });
      $("title,h1.name,th.name").text(str);
    })
    .trigger('change');
4

2 に答える 2

2

changeそれぞれでイベントをトリガーしclickて、変更を加えることができます。

$("#next").click(function() {
    $("#mycars").val($("#mycars > option:selected").next().val()).trigger("change");
});

$("#prev").click(function() {
    $("#mycars").val($("#mycars > option:selected").prev().val()).trigger("change");
});

デモ: http://jsfiddle.net/u7dDw/

于 2012-05-05T11:34:18.350 に答える
2

コードは次のように統合および修正できます。

$(".fontpicker").change(function() {
    $font = $('.fontpicker option:selected').val();
    $('.name').css('fontFamily', $font);
    $('.font_preview').css('fontFamily', $font);
    $("title,h1.name,th.name").text($font);
}).change();

$("#next").click(function() {
    $(".fontpicker").val($(".fontpicker >option:selected").next().val()).change();
});

$("#prev").click(function() {
    $(".fontpicker").val($(".fontpicker >option:selected").prev().val()).change();
});

更新されたフィドルを参照してください

于 2012-05-05T11:48:32.240 に答える