将css应用于jquery代码

我想将jquery themeroller高亮显示/错误html应用于我的jquery代码。这就是jquery突出显示代码的样子（错误代码类似）：

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

这将打印到一个div：

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

<div id="quote"><p> </p></div>

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

---

我认为在这里使用

.css（）

很麻烦。有没有办法将html添加到条件语句中？请注意，

.html（数据）

是必要的，因为您从服务器收到不同的消息，除非有其他建议。

您可以尝试创建一个小部件来创建元素

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

$.widget( "jui.highlightBox", {

    options: {
        html:'',
        icon: 'ui-icon-info'
    },

    _create: function() {
        var wrapper = $('<div>',{'class':'ui-widget'}),
            container = $('<div>',{'class':'ui-state-highlight ui-corner-all',style:'margin-top: 20px; padding:.7em;'}),
            icon = $('<span>',{'class':'ui-icon ' + this.options.icon,style:'float: left; margin-right: .3em;'});
        wrapper.html(container.html(this.options.html))
        .appendTo(this.element);
        if(this.options.icon != '')
            icon.prependTo(container);
    }
});

$.widget（“jui.highlightBox”{
选项：{
html:“”，
图标：“ui图标信息”
},
_创建：函数（）{
var wrapper=$（''，{'class'：'ui-widget'}），
container=$（“”，{'class'：'ui-state-highlightui-corner-all'，样式：'margin-top:20px；padding:7em；'}），
icon=$（“”，{'class'：'ui-icon'+this.options.icon，样式：'float:left；margin-right:.3em；'}）；
html（container.html（this.options.html））
.appendTo（此元素）；
如果（this.options.icon！=''）
icon.prependTo（容器）；
}
});

对于错误文本

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

$.widget( "jui.errorBox", {

    options: {
        html:'',
        icon: 'ui-icon-alert'
    },

    _create: function() {

        var wrapper = $('<div>',{'class':'ui-widget'}),
            container = $('<div>',{'class':'ui-state-error ui-corner-all',style:'margin-top: 20px; padding:.7em;'}),
            icon = $('<span>',{'class':'ui-icon ' + this.options.icon,style:'float: left; margin-right: .3em;'});
        wrapper.html(container.html(this.options.html))
        .appendTo(this.element);
        if(this.options.icon != '')
            icon.prependTo(container);
    }
});

$.widget（“jui.errorBox”{
选项：{
html:“”，
图标：“ui图标警报”
},
_创建：函数（）{
var wrapper=$（''，{'class'：'ui-widget'}），
容器=$（“”，{'class'：'ui-state-error-ui-corner-all'，样式：'margin-top:20px；padding:7em；'}），
icon=$（“”，{'class'：'ui-icon'+this.options.icon，样式：'float:left；margin-right:.3em；'}）；
html（container.html（this.options.html））
.appendTo（此元素）；
如果（this.options.icon！=''）
icon.prependTo（容器）；
}
});

你可以用这样的方式来突出

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

$('<p>').highlightBox({'html':data}).appendTo('#quote'); // highlight

$（“”）.highlightBox（{'html'：data}）.appendTo（“#quote”）；//突出

…这是错误文本

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

$('<p>').errorBox({'html':data}).appendTo('#quote'); // error

$（“”）.errorBox（{'html'：data}）.appendTo（“#quote'）；//错误

所以你的函数现在看起来像这样

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

function doAjax(){
        $.ajax({
            url: 'myfile.php',
            success: function(data) {
                if (data == 'Initializing...please wait')
                {
                    $('<p>').highlightBox({'html':data}).appendTo('#quote');
                    setTimeout(doAjax, 2000);
                }
                else
                {

                    $('<p>').errorBox({'html':data}).appendTo('#quote');

                }

            }
        });

    }

函数doAjax（）{
$.ajax({
url:'myfile.php'，
成功：功能（数据）{
如果（数据==“正在初始化…请稍候”）
{
$（“”）.highlightBox（{'html'：data}）.appendTo（“#quote”）；
setTimeout（doAjax，2000）；
}
其他的
{
$（“”）.errorBox（{'html'：data}）.appendTo（“#quote”）；
}
}
});
}

由于这将创建

标记，您可以将其从HTML中删除

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

<div id="quote"></div>

---

我很惊讶JQuery UI还没有内置的小部件来实现这一点。

太棒了，谢谢你的努力。这比我想象的要复杂。

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>