使用 jquery 为 jsp 标签动态分配样式答案

【问题标题】：assign styles to jsp tags dynamically using jquery使用 jquery 为 jsp 标签动态分配样式
【发布时间】：2014-07-23 17:28:36
【问题描述】：

尝试使用 Jquery 动态地将样式分配给 jsp 标签。

       <script>
        $(document).ready(function(){
            var color=$("#cscolour").val();    
            if(color!=null){
                $("#color").css('background-image', 'none');
                $("#color").css({"background-color":color});
            }
        });
        </script>

        <body>
        <input type="hidden" name="cscolour" id="cscolour" value='<%= csticColour %>'/>
  <h1 id='<%= csticColour %>'> welcome </h1>
        </body>

【问题讨论】：

具体问题不清楚
为什么不直接创建css类并将它们分配给jsp标签呢？当它们在 DOM 中加载时，它们将具有这些类。
你的“jsp”标签（最后应该是html标签）有id“color”吗？
id为“color”的HTML元素在哪里？
为什么要将h1的id设置为输入的值？这没有意义。

标签： jquery jsp tags styles

【解决方案1】：

我希望你是这样尝试的，

$(document).ready(function(){
    $(".colors").each(function( index ) {
        $("#"+this.id).css({"background-color": this.id});
    });
});

还有 HTML 部分，

<input type="hidden" name="cscolour" id="cscolour" value="YELLOW"/>
<h1 id="YELLOW" class="colors">vk</h1>
 <h1 id="RED" class="colors">vk1</h1>
  <h1 id="GREEN" class="colors">vk2</h1>

在Live。请在提问前阅读 SO 中的说明。

请检查更新部分。根据您的新 cmets，我添加了以下内容。

<h1 class="YELLOW">vk</h1>
<h1 class="RED">vk1</h1>
<h1 class="GREEN">vk2</h1>
<h1 class="YELLOW">vk3</h1>
<h1 class="GREEN">sh1</h1>
<h1 class="RED">sh2</h1>

脚本部分是，

$(document).ready(function(){
   $("h1").each(function( index ) {
     $("."+$(this).attr("class")).css({"background-color": $(this).attr("class")});
   });
});

在这里查看demo。

【讨论】：

是的，但是颜色和 id 是由用户在运行时输入的。所以我想动态地做同样的事情
你可以用class代替id。如果出现不止一个黄色，您的页面将不会像您想象的那样正确响应。
@VK- 当我们有多个
标签时，这不起作用。
Shanmugam 检查this。我刚刚将 h1 用于动态颜色。
抱歉，同样的颜色，如果我们有多个 id，它不会显示。如果它相同，任何绕过 ids 的想法。请检查链接 - jsfiddle.net/dtjv2/3

标签时，这不起作用。