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

Question

此脚本的目的是显示用户选择复选框后文本格式的“实时预览”。它正在 WordPress 插件中使用。

如果用户选择“粗体”复选框，Lorem Ipsum“div”文本应显示为带有开始和结束“strong”标签。

这偶尔会起作用，例如当我编写脚本只是为了解决其中一个问题时，即“strong”或“em”，但我希望能够拥有该段落(parText 对象)始终反射(reflect)所有选择。

我想我的函数定义和回调有问题。我对 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结束});

Answer 1

这是一个工作示例 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');
    });
});