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>

我计划做的是在桌面中存储几十种不同的背景颜色，并在用户登录时将其分配给未使用的颜色。之后，该用户的评论将以其指定的颜色显示。起初我以为我必须创建一大堆不同颜色的类（我可能不得不这样做）。但我希望能有一种更有活力的方式来做到这一点。如果我能以某种方式将颜色注入css而不改变其他人的评论，那就太棒了。

我认为另一种不太理想的方法是将所有样式内联，我可以使用剃刀来注入背景颜色。这个问题是我可能在页面上有几百个注释，这会使页面变得很大并且可能很慢渲染。

任何想法都将不胜感激。如果您需要澄清或更多关于我的问题的代码，请不要犹豫。

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选项允许您在匹配元素中定位颜色变化的后代。

e.g。

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

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

将值注入CSS类

1 个答案: