JavaScript中带连字符的类无法生效，求代码修复方案

嘿，这个问题我遇过好多次了！核心原因是JavaScript的命名规则在搞鬼——咱们一步步来拆解和修复：

问题根源 #

你写的选择器$(".my-firstli")是完全合法的（CSS类名允许用连字符），但后面的.my-firstli({...})调用插件的方式错了！

JavaScript里的函数/方法名属于标识符，标识符不能包含连字符（-），因为引擎会把my-firstli解析成my - firstli——也就是变量my减去变量firstli，这显然不是你要的插件调用逻辑，所以浏览器会直接抛出引用错误。

两种修复方案 #

方案1：改用驼峰命名法（推荐）

这是JavaScript社区的通用规范，把带连字符的方法名改成驼峰形式，比如my-firstli改成myFirstLi：

$(document).ready(function() {
  $(".my-firstli").myFirstLi({
    items: 1,
    itemsDesktop: [1000, 2],
    itemsDesktopSmall: [979, 2],
    itemsTablet: [768, 2],
    itemsMobile: [650, 1],
    pagination: true,
    navigation: false,
    slideSpeed: 1000,
    autoPlay: true
  });
});

如果你是自己写的插件，记得注册插件时也要用驼峰名：$.fn.myFirstLi = function(options) {...}。如果是第三方插件，先查文档确认它的方法名是不是用驼峰写的（大部分插件都会遵循这个规范）。

方案2：用方括号语法调用（适合无法修改方法名的情况）

如果插件本身就是用带连字符的名称注册的，你可以用方括号+字符串的方式调用方法，因为方括号里允许用字符串作为属性名：

$(document).ready(function() {
  $(".my-firstli")["my-firstli"]({
    items: 1,
    itemsDesktop: [1000, 2],
    itemsDesktopSmall: [979, 2],
    itemsTablet: [768, 2],
    itemsMobile: [650, 1],
    pagination: true,
    navigation: false,
    slideSpeed: 1000,
    autoPlay: true
  });
});

额外提醒 #

• CSS类名和JavaScript标识符的规则不一样：前者允许连字符、中划线，后者只能用字母、数字、下划线、$，且不能以数字开头。
• 以后写jQuery插件调用时，记住选择器可以用连字符，但方法名必须符合JS标识符规则。

内容的提问来源于stack exchange，提问作者user9779944