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

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

如果用户选中“粗体”复选框，则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');
        });

$（文档）.ready（函数（）{
parText='Lorem ipsum door sit amet，concetetur adipism elit.Fusce orna tempus magna，eu tempor nis posuere at.在sagittis nulla quis metus convallis，ornare sit amet id ligula.Duis posuere scelerisque justo，consequeat nulla euismod et.Donec consequeat nec magna vel aliquet.Suspendisse feliss leo，aliquet，aliquet在stas non，placerat在拉齐尼亚元素之翼的蜗壳中，有一个属于弗林利亚的地方。在拉齐尼亚元素之翼的地方，有一个属于弗林利亚的地方；
//设置HTML标记的值
黑体字=“”；
boldClosed=''；
斜体开放=“”；
斜体封闭=“”；
//函数返回HTML值
函数htmlopenclotsetags（）{
//粗体和斜体
if（$（'select#u bold'）.prop（'checked'）==true&$（'select#u italics'）.prop（'checked'）==true）{
htmlOpen=粗体+斜体打开；
htmlClose=粗体闭合+斜体闭合；
} 
//粗体字
如果（$（'select#u bold'）.prop（'checked'）==true&&$（'select#u italics'）.prop（'checked'）==false）{
htmlOpen=boldOpen；
htmlClose=boldClosed；
}
//仅斜体字
如果（$（'select#u bold'）.prop（'checked'）==false&&$（'select#u italics'）.prop（'checked'）==true）{
htmlOpen=斜体打开；
htmlClose=斜体闭合；
}
//都不是
否则{
htmlOpen=''；
htmlClose=''；
}
var输出=htmlOpen+parText+htmlClose；
返回输出；
}
//粗体实时预览
$（'#选择_bold'）。更改（函数（）{
$（“#实时预览”）.hide（）；
htmloutput=htmlOpenCloseTags（）；
$（'live#u preview'）.html（htmloutput）；
$（'live#u preview'）。fadeIn（'fast'）；
});
//斜体实时预览
$（'#选择_斜体'）。更改（函数（）{
$（“#实时预览”）.hide（）；
$（'live#u preview'）.html（htmlOpen+parText+htmlClose）；
$（'live#u preview'）。fadeIn（'fast'）；
});

//结束jquery });

下面是一个有效的例子

$（文档）.ready（函数（）{
var parText=‘Lorem ipsum door sit amet，concetetur adipism elit.Fusce orna tempus magna，eu tempor nis posuere at.在sagittis nulla quis metus convallis ornare坐着amet id ligula.Duis posuere scelerisque justo，在consequest nulla euismod et.Donec consequest nec magna vel.Suspendisse felis leo，aliquet at staeges non，placerat.在Staeges非永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久性永久；
//函数返回HTML值
函数htmlopenclotsetags（）{
var htmlOpen=''；
var htmlClose=''；
如果（$（'#选择加粗“）.prop（'checked'））{
htmlOpen=''+htmlOpen；
htmlClose+=''；
} 
如果（$（'#选择斜体“）.prop（'checked'））{
htmlOpen=''+htmlOpen；
htmlClose+=''；
}
返回htmlOpen+parText+htmlClose；
}
//粗体实时预览
$（'#选择_bold'）。更改（函数（）{
$（“#实时预览”）.hide（）；
var htmloutput=htmlOpenCloseTags（）；
$（'live#u preview'）.html（htmloutput）；
$（'live#u preview'）。fadeIn（'fast'）；
});
//斜体实时预览
$（'#选择_斜体'）。更改（函数（）{
$（“#实时预览”）.hide（）；
var htmloutput=htmlOpenCloseTags（）；
$（'live#u preview'）.html（htmloutput）；
$（'live#u preview'）。fadeIn（'fast'）；
});
});

现在它只是隐藏段落文本，而不管选中哪个复选框。我喜欢“+=”的用法。这本质上是PHP中“=”的javascript等价物？有一个问题，为什么对htmlClose变量使用“+=”而不是htmlOpen变量？为什么会有差异？Javascript中的Yes

+=

与PHP中的

=

在追加文本方面是相同的。区别在于当您选择了多个选项时会发生什么。对于每种样式，开头标记将被加在前面，结尾标记将被加在后面。例如，如果您选择了粗体，则

htmlOpen

变量将为

，而

htmlClose

变量将为

。如果还选择了斜体，则

htmlOpen

变量将是

，

htmlClose

变量将是

@ChrisBuck。您说过“现在只是隐藏段落文本，不管选中哪个复选框。”，您还有什么问题需要解决吗？在我发布的JSFIDLE中，它似乎运行良好。这很有趣。这是在jsfiddle站点上工作的，我看到了，但在我的Wordpress插件管理页面上不工作。这一定是我的PHP创建HTML的方式，对吧？不管怎样，使用JSFIDLE，我应该能够找出错误所在。如果可以，我会发布更新。你的代码是de

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