Question

我不熟悉jquery和javascript，但我设法让这个代码适用于我的Drupal网站（我已经包含了所需的Drupal jQuery调用代码的开头和结尾作为参考，作为'context'部分使它可以与Ajax一起刷新，以便作为各种参考，随意忽略）

(function ($) {
Drupal.behaviors.borderfarba = {
    attach: function (context, settings) {

        var nmbr = 1; /// this will be a counter
        var backcolor; /// here I store the generated random color
        $(".movierow", context).each(function () {

            /// I declare a class + a number from the counter
            var clrclass = "clr" + nmbr;

            /// I add this class to each .movierow class 
            /// which is inside a div containing divs with the other classes
            $(this).addClass(clrclass);

            /// storing the random color
            backcolor = get_random_color();

            /// pass the  class and color value to function
            addborder(clrclass, backcolor);

            /// up the counter
            nmbr++;
        });


        function addborder(clrclass, backcolor) {
            /// before the inset border effect I also
            /// apply the backcolor to a title and rating field
            /// that appear over the image

            $("." + clrclass + " .views-field-field-screenrate").css("background", backcolor);
            $("." + clrclass + " .screentitle").css("background", backcolor);

            /// apply the inset border effect
            $("." + clrclass + " img").insetBorder({
                borderColor: backcolor,
                inset: 5
            });
        }

        /// randomization functions
        function rand(min, max) {
            return parseInt(Math.random() * (max - min + 1), 10) + min;
        }

        function get_random_color() {
            var h = rand(40, 130);
            var s = rand(30, 75);
            var l = rand(40, 60);
            return 'hsl(' + h + ',' + s + '%,' + l + '%)';
        }

        /// add a nice slide down/up effect
        /// on mouse in/out for the title
        $(".movierow").hover(
        function () { $(this).children(".screentitle").slideDown(); },
        function () { $(this).children(".screentitle").slideUp(); }
        );

    }
};

})(jQuery);

关键是我想要一个指定范围内的新随机颜色（比如在我的情况下从红色色调到绿色）应用于找到的jQuery插入边框效果here，然后应用于我页面上的每个图像（动态生成）。 PS。我想我在这附近的某个地方找到了随机颜色生成代码片段，所以多亏了那个人，不要在没有到期的情况下获得信用。

因此我使用了一个循环，为每个图像添加一个新类，然后将插入边框函数应用于每个类。

我想知道是否有任何方法可以优化此代码以提高效率，因为这是我想办法的唯一方法。

欢呼并感谢任何建议，希望提高我低于标准的编程技能

更新我已经修改了一些代码（并添加了注释），因为我需要为图像上显示的2个附加字段提供相同的随机背景颜色（标题，评级）

Answer 1

不是答案，而是一个问题......

为什么要将'nmbr'转换为字符串？

  /// I declare a class + a number from the counter
  var clrclass = "clr" + nmbr.toString();
  /// I add this class to each .movierow class 
  /// which is inside a div containing divs with the other classes
  $(this).addClass(clrclass);

这不会更简单吗？...

   $(this).addClass('clr'+nmbr);

否则，你的代码看起来非常高效，但我远非专家。

优化jQuery动态添加插入边框效果

1 个答案: