Question

此脚本的目的是显示＆＃34;实时预览＆＃34;用户选择复选框后如何格式化文本。它正在Wordpress插件中使用。

如果用户选择＆＃34;粗体＆＃34;复选框，Lorem Ipsum＆＃34; div＆＃34;文字应该出现在开启和关闭状态＆＃34; strong＆＃34;标签

这种情况偶尔会发生，例如当我编写脚本时只是为了解决其中一个问题，即“强大的”＃34; 或＆＃34; em＆＃34;，但我希望能够让段落（parText对象）始终反映所有选项。

我想象我的函数定义和回调有问题。我不像PHP那样熟悉JQuery。这是我正在使用的代码：

$(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');
    });
});

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

1 个答案: