javascript - 如何在 jQuery 中将 css 游标值设置为变量？

Question

我正在尝试制作一个小的 jQuery 插件，这样我就可以动态地更改光标。但是当我尝试将光标设置为变量时，它什么也没做。

这是 JS 文件中的代码:

(function ($) {
$.fn.dynamicCursors = function () {
    this.each(function () {

        var cursorImage = null;
        $(this).css('cursor', 'url(' + cursorImage + '),auto');

        });
    });   
});
}(jQuery));

这是 <script> 中代码的代码HTML 文件中的标记:

$('document').ready(function() {
            $('body').dynamicCursors();
        });

        var cursorImage = 'generic.cur';

如果有人需要更多信息，请告诉我。谢谢!

Answer 1

您似乎在设置样式属性之前将 cursorImage 设置为 null。此外，您的括号不平衡。

尝试将光标 URL 作为参数传递给函数:

(function ($) {
  $.fn.dynamicCursors = function (cursorImage) {
    this.each(function () {
      $(this).css('cursor', 'url(' + cursorImage + '),auto');
    });
  };
}(jQuery));

你可以这样调用它:

$('body').dynamicCursors('generic.cur')

备选

如果您知道将要使用的所有游标，则可以使用类:

/* CSS */
.cursor-generic {
  cursor: url('generic.cur'), auto;
}

所以你可以:

$(this).addClass('cursor-generic');

希望对您有所帮助!