Javascript 使用jquery:带有下一个/上一个箭头的选定选择器
我正在尝试设置用于在线字体预览的小型web应用程序。直到现在一切都很顺利。我已经使选择框工作正常,测试文本区工作正常,字体大小调整器工作正常,粗体、斜体的复选框工作正常。。。工作正常,包含字体列表。当我从“选择列表”中选择一种字体时,页面上所有内容的预定义文本都会发生更改,这没关系,但我决定在“下一步”和“上一步”中添加箭头,以便进行快速更改,这同样有效,但一些元素在单击按钮时不会更改 实际问题是什么 当我从选择列表中选择字体时,所有内容都会更改,但当我在下一页/上一页H1中使用这些按钮时,页面标题不想更改,因为我需要在页面标题以及页面标题中显示字体名称 这是: 是否有人可以检查此脚本并指出问题所在:Javascript 使用jquery:带有下一个/上一个箭头的选定选择器,javascript,jquery,forms,Javascript,Jquery,Forms,我正在尝试设置用于在线字体预览的小型web应用程序。直到现在一切都很顺利。我已经使选择框工作正常,测试文本区工作正常,字体大小调整器工作正常,粗体、斜体的复选框工作正常。。。工作正常,包含字体列表。当我从“选择列表”中选择一种字体时,页面上所有内容的预定义文本都会发生更改,这没关系,但我决定在“下一步”和“上一步”中添加箭头,以便进行快速更改,这同样有效,但一些元素在单击按钮时不会更改 实际问题是什么 当我从选择列表中选择字体时,所有内容都会更改,但当我在下一页/上一页H1中使用这些按钮时,页面
$(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');
您可以在每次单击中触发更改事件以更改内容:
$("#next").click(function() {
$("#mycars").val($("#mycars > option:selected").next().val()).trigger("change");
});
$("#prev").click(function() {
$("#mycars").val($("#mycars > option:selected").prev().val()).trigger("change");
});
演示:您可以在每次单击中触发更改事件以更改内容:
$("#next").click(function() {
$("#mycars").val($("#mycars > option:selected").next().val()).trigger("change");
});
$("#prev").click(function() {
$("#mycars").val($("#mycars > option:selected").prev().val()).trigger("change");
});
演示:代码可以按如下方式合并和修复:
$(".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();
});
请参见代码可以按如下方式合并和固定:
$(".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();
});
请参见u是否可以将html代码粘贴到@ThulasiRam中pasted@ThulasiRam你做了和我一样的事情…有同样的问题字体名称不会改变。你和我的按钮在任何情况下都可以工作,但其他方面有问题…我的JS Fiddle执行此操作->@Marko我不理解你的问题。你能将html代码粘贴到@ThulasiRam中吗pasted@ThulasiRam你做了和我一样的事情…有同样的问题字体名称不会改变。您和我的按钮在任何情况下都可以工作,但其他方面有问题…se my JS Fiddle可以工作->@Marko我不理解您的问题。现在只有一个问题处于活动状态…当您使用“下一步”按钮到达字体列表的末尾时,您必须使用“上一步”按钮返回列表的开头,或者您可以使用“重置”按钮。是否可以在下一个/上一个按钮上添加常量循环?@Beetroot Beetroot-同时整个脚本在IE中不起作用all@Marko,请确保删除$select.change处理程序。上面的代码取代了它。@Marko,从您所说的,我认为$fontpicker>option:selected.next在不同的浏览器中必须工作不同。。。下一步是歌剧,不过…prev没有。也许有更好的方法实现下一步/上一步!我来看看。现在只有一个问题处于活动状态……当您使用“下一步”按钮到达字体列表的末尾时,您必须使用“上一步”按钮返回列表的开头,或者您可以使用“重置”按钮。是否可以在下一个/上一个按钮上添加常量循环?@Beetroot Beetroot-同时整个脚本在IE中不起作用all@Marko,请确保删除$select.change处理程序。上面的代码取代了它。@Marko,从您所说的,我认为$fontpicker>option:selected.next在不同的浏览器中必须工作不同。。。下一步是歌剧,不过…prev没有。也许有更好的方法实现下一步/上一步!我来看看。