使用JQuery/Javascript显示复选框格式选项的实时预览
Use JQuery/Javascript to show a live preview of checkbox formatting options
这个脚本的目的是显示一旦用户选中一个复选框,文本将如何被格式化的"实时预览"。它被用于一个Wordpress插件。
如果用户选择了"bold"复选框,Lorem Ipsum的"div"文本应该出现,并带有开始和结束的"strong"标签。
这偶尔会起作用,例如当我编写脚本只处理其中一个或另一个时,即"strong"或"em",但我希望能够让段落(parText对象)始终反映所有选择。
我想我的函数定义和回调有问题。JQuery对我来说不如PHP熟悉。下面是我正在使用的代码:
$(document).ready(function(){
parText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare tempus magna, eu tempor nisi posuere at. In sagittis nulla quis metus convallis ornare sit amet id ligula. Duis posuere scelerisque justo, in consequat nulla euismod et. Donec consequat nec magna vel aliquet. Suspendisse felis leo, aliquet at egestas non, placerat non erat. Pellentesque placerat quam nec erat fringilla, ut accumsan lorem pharetra. In volutpat nunc at ligula elementum lacinia. Donec sit amet lectus lobortis enim tempus semper at ut lacus.';
//SET THE VALUE OF THE HTML TAGS
boldOpen = '<strong>';
boldClosed = '</strong>';
italicsOpen = '<em>';
italicsClosed = '</em>';
//FUNCTION TO RETURN HTML VALUE
function htmlOpenCloseTags() {
//bold and italics
if ( $('#select_bold').prop('checked') == true && $('#select_italics').prop('checked') == true ) {
htmlOpen = boldOpen + italicsOpen;
htmlClose = boldClosed + italicsClosed;
}
//bold only
else if ( $('#select_bold').prop('checked') == true && $('#select_italics').prop('checked') == false ) {
htmlOpen = boldOpen;
htmlClose = boldClosed;
}
//italics only
else if ( $('#select_bold').prop('checked') == false && $('#select_italics').prop('checked') == true ) {
htmlOpen = italicsOpen;
htmlClose = italicsClosed;
}
//neither
else {
htmlOpen = '';
htmlClose = '';
}
var output = htmlOpen + parText + htmlClose;
return output;
}
//BOLD LIVE PREVIEW
$('#select_bold').change(function(){
$('#live_preview').hide();
htmloutput = htmlOpenCloseTags();
$('#live_preview').html(htmloutput);
$('#live_preview').fadeIn('fast');
});
//ITALICS LIVE PREVIEW
$('#select_italics').change(function(){
$('#live_preview').hide();
$('#live_preview').html(htmlOpen + parText + htmlClose);
$('#live_preview').fadeIn('fast');
});
//jquery结束});
下面是一个工作示例http://jsfiddle.net/W8774/1/.
$(document).ready(function(){
var parText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ornare tempus magna, eu tempor nisi posuere at. In sagittis nulla quis metus convallis ornare sit amet id ligula. Duis posuere scelerisque justo, in consequat nulla euismod et. Donec consequat nec magna vel aliquet. Suspendisse felis leo, aliquet at egestas non, placerat non erat. Pellentesque placerat quam nec erat fringilla, ut accumsan lorem pharetra. In volutpat nunc at ligula elementum lacinia. Donec sit amet lectus lobortis enim tempus semper at ut lacus.';
//FUNCTION TO RETURN HTML VALUE
function htmlOpenCloseTags() {
var htmlOpen = '';
var htmlClose = '';
if ($('#select_bold').prop('checked')) {
htmlOpen = '<strong>' + htmlOpen;
htmlClose += '</strong>';
}
if ($('#select_italics').prop('checked')) {
htmlOpen = '<em>' + htmlOpen;
htmlClose += '</em>';
}
return htmlOpen + parText + htmlClose;
}
//BOLD LIVE PREVIEW
$('#select_bold').change(function(){
$('#live_preview').hide();
var htmloutput = htmlOpenCloseTags();
$('#live_preview').html(htmloutput);
$('#live_preview').fadeIn('fast');
});
//ITALICS LIVE PREVIEW
$('#select_italics').change(function(){
$('#live_preview').hide();
var htmloutput = htmlOpenCloseTags();
$('#live_preview').html(htmloutput);
$('#live_preview').fadeIn('fast');
});
});
相关文章:
- 我的单元测试选项是什么
- 如何更改bigquery API中的计费层选项
- 使用Javascript获取所选选项ID
- Selectize.js:如何对整数值的选项进行排序
- 通过js在新选项卡中有条件地打开url
- 使用Facebook live API创建实时视频对象时的隐私设置
- 按照选项卡索引的顺序循环一个jQuery选择
- 有任何可能将facebook实时信使整合到一个网站中
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- 无法在Ionic select中预先选择最后一个选项
- 如何在选项卡上定义属性'的主窗口对象
- 为什么grunt contrib connect的中间件选项的第三个参数是未定义的
- 使用此选项选择父类内部的类
- CKeditor:更改对话框中的默认选择选项
- 使用实时修复修复非活动选项卡中的Javascript动画计时
- Javascript实时价格计算(从选项和复选框)
- 什么'是通过websocket实时数据的性能最高的全JavaScript图表选项
- 构建实时网站的选项
- 浏览器html5实时游戏.广播游戏状态选项
- 使用JQuery/Javascript显示复选框格式选项的实时预览