jquery - 将值注入(inject) CSS 类

Question

如果之前有人问过这个问题，我提前道歉。我尽我所能进行搜索，但我真的不知道如何描述它。

我正在向数据表添加评论。我希望评论气泡的背景根据用户的不同而不同。评论气泡使用嵌入背景的 CSS 类。见下文

.triangle-border {
  position:relative;
  padding:5px;
  margin:1em 0 3em;
  border:1px solid #CECECF;
  color:#333;
  background:#f8f4d4;   /* <<== background here */
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#5a8f00 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the larger triangle */
.triangle-border.left:before {
  top: 5px; /* controls vertical position */
  bottom:auto;
  left:-20px; /* value = - border-left-width - border-right-width */
  border-width: 0px 20px 10px 0;
  border-color:transparent #CECECF;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
  top:6px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:-15px; /* value = - border-left-width - border-right-width */
  border-width:0px 16px 7px 0;
  border-color:transparent #f8f4d4; /* <<== and here */
}

然后我使用 Razor 在代码中创建评论气泡:

<div style="height: 30px;">
    @comment.User
    <span class="triangle-border left" style="width: @comment.CommentLength">@comment.Text</span>
    <span style="font-size: 12px">@comment.CreateDate</span>
</div>

我打算做的是在一个表格中存储几十种不同的背景颜色，并在用户登录时为他们分配一种未使用的颜色。之后，该用户的评论将以他们指定的颜色显示。起初我以为我必须创建一大堆具有不同颜色的类(我可能不得不这样做)。但我希望能有一种更动态的方式来做到这一点。如果我能以某种方式将颜色注入(inject)到 css 中而不改变其他人的评论，那就太好了。

我在想另一种不太理想的方法是让所有样式内联，我可以使用 Razor 注入(inject)背景颜色。这样做的问题是我可能在一个页面上有几百条评论，这会使页面变得非常大并且呈现速度可能很慢。

如有任何想法，我们将不胜感激。如果您需要关于我的问题的说明或更多代码，请随时提出。

Answer 1

有些任务适合客户端代码。这似乎是其中之一，因为您需要每个元素的各种值，而不是元素集(这更适合 CSS 中的类样式)。

下面的代码，我已将其重写为 jQuery 扩展，将根据指定元素中文本的哈希值生成用作背景的颜色。只需在所需元素上使用 .hashColor()。

JSFiddle: http://jsfiddle.net/040yL80p/1/

$.fn.hashColor = function (options)
    {
        // Merge options into an empty object
        options = $.extend({}, options);
        this.each(function ()
        {
            var $this = $(this);

            // Get the source of the text to hash
            var str = options.textSelector ? $this.find(options.textSelector).text() : $this.text();

            // Find the target for the background color and class
            var $target = options.bgSelector ? $this.find(options.bgSelector) : $this;

            var hash = 0;
            for (var i = 0; i < str.length; i++)
            {
                hash = str.charCodeAt(i) + ((hash << 5) - hash);
            }
            var colour = '#';
            var rgb = [];
            for (var i = 0; i < 3; i++)
            {
                var value = (hash >> (i * 8)) & 0xFF;
                rgb[i] = value;
                colour += ('00' + value.toString(16)).substr(-2);
            }

            var lum = Math.sqrt(rgb[0] * rgb[0] * .299 + rgb[1] * rgb[1] * .587 + rgb[2] * rgb[2] * .114);

            $target.css('background-color', colour);
            $target.toggleClass('Light', lum < 100);
        });
        return this;
    }

测试代码

$('.comment .username').hashColor();

注意事项:

• 当值对于深色文本来说太暗时，它会自动添加 .Light 类。这允许对比文本。
• textSelector 选项允许您针对父元素而不是颜色，但使用相对选择器从后代获取文本。
• bgSelector 选项允许您将匹配元素中的后代作为颜色更改的目标。

例如

 $('.comment').hashColor({textSelector: '.username'});

根据子元素对整个评论进行着色:http://jsfiddle.net/TrueBlueAussie/040yL80p/2/