使用 jQuery :带有下一个/上一个箭头的选定选择器

我正在尝试为在线font预览目的设置小型Web应用程序。直到现在一切都很好。我已经制作了选择框（工作正常），测试文本区域（工作正常），字体大小器（工作正常），粗体，斜体复选框...（工作正常），其中包含字体列表。当我从选择列表中选择一种字体时，页面上的所有内容（预定义文本）都会更改，这没关系，但我决定添加箭头（下一个和上一个）进行快速更改，这也可以工作，但某些元素不会在按钮单击时更改。

实际问题是什么？

从选择列表中选择字体时，一切都会改变，但是当我将这些按钮用于下一个/上一个 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');