【问题标题】：How to set css cursor value to variable within jQuery?如何在 jQuery 中将 css 光标值设置为变量？
【发布时间】：2016-08-27 21:25:24
【问题描述】：

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

这是JS文件中的代码：

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

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

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

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

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

        var cursorImage = 'generic.cur';

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

【问题讨论】：

您在设置 css 样式之前将 cursorImage 设置为 null。这是故意的吗？
您在歌剧中进行测试吗？据我所知，它在歌剧中不能正常工作
@JohnWilliamDomingo 那么我该如何声明变量？
@ZumryMohamed 不。我正在 Chrome 中测试它。
@Njinx，请参阅我发布的答案。我提出了两种选择。

标签： javascript jquery html css variables

【解决方案1】：

最好将光标作为参数简单地传递给函数，例如：

(function($) {

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

那么你可以简单地这样称呼它：

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

【讨论】：

嗯，它似乎仍然不起作用。我检查了我的控制台并得到了这个：Uncaught SyntaxError: Unexpected token )
@Njinx 抱歉，我没注意到你的函数中有一些语法错误

【解决方案2】：

您似乎在设置 style 属性之前将 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');

希望有帮助！

【讨论】：

【解决方案3】：

只需更改“var cursorImage=null;”到“var cursorImage;”。

【讨论】：

【解决方案4】：

查看Example

$("div").css('cursor','url(http://w17.snunit.k12.il/images/big_arrow.png),auto');

效果很好

【讨论】：