使用JQuery/Javascript显示复选框格式选项的实时预览

Use JQuery/Javascript to show a live preview of checkbox formatting options

本文关键字:选项 实时 格式 复选框 JQuery Javascript 显示 使用      更新时间:2023-09-26

这个脚本的目的是显示一旦用户选中一个复选框,文本将如何被格式化的"实时预览"。它被用于一个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');
    });
});