jQuery：用数字获取类并替换它

Question

鉴于此 HTML：

<div id="foo">
    <input type=button class="foo abtn_1">
    <input type=button class="joe bbtn_2">
    <input type=button class="doe cbtn_2">
    <input type=button class="cool dbtn_1">
</div>

当我单击一个按钮时，我需要获取包含下划线的类（仅）并将其编号从 2 更改为 1。

目前我在每个班级都使用这个：

$('.abtn_1').live('click', function () {
 $(this).switchClass('abtn_1','abtn_2');
});
$('.abtn_2').live('click', function () {
 $(this).switchClass('abtn_2','abtn_1');
});
$('.bbtn_1').live('click', function () {
 $(this).switchClass('bbtn_1','bbtn_2');
});
$('.bbtn_2').live('click', function () {
 $(this).switchClass('bbtn_2','bbtn_1');
});
// etc

因此，我没有多次这样做，而是想通过获取下划线类并相应地更改它的数字来将整个事情变成一两行。

我想它会是这样的：

var a =      // $(this).attr('class') without number and underscore
var b =      // This class number only
var c = $(this).attr('class'); // If I wanted to call it from 
                               // its parent $('#foo input'). 

if a contains number 1 {
    $(this).switchClass(c, a + '_1')
} else {
    $(this).switchClass(c, a + '_2')
};

Answer 1

此代码将执行以下操作：

1. 对所有输入元素使用一个事件处理程序
2. 将已弃用的.live() 替换为.delegate()（因为OP 使用jQuery 1.6）
3. 无论aaa_1 或bbb_2 类名在类名列表中的哪个位置，都可以找到它

代码如下：

​$(document).delegate('#foo input', 'click', ​function() {
    if (this.className.match(/_1(\s|$)/)) {
        this.className = this.className.replace("_1", "_2");
    } else {
        this.className = this.className.replace("_2", "_1");
    }
});​

当使用.delegate() 或.on() 时，您应该为主jQuery 对象选择器选择一个静态父元素。我在这里使用 document 只是因为您没有透露 HTML 的其余部分，但最好使用更接近实际目标元素的内容。

---

这是另一种使用自定义替换功能的有趣方法：

$(document).delegate('#foo input', 'click', function() {
    this.className = this.className.replace(/_(\d)(\s|$)/, function(str, p1, p2) {
        return("_" + (p1 == "1" ? "2" : "1") + p2);
    });
});​

在这里演示：http://jsfiddle.net/jfriend00/xgUzT/

Answer 2

$(document).delegate('#foo input', 'click', function () {
    var currentClass = this.className, //you can use $(this).attr("class") here if you want
    slicedClass = currentClass.slice(0,-2); //I'm asuming the _number is always at the end and with one digit, for better slicing use .replace(/_[0-9]+/, "");

   if(currentClass.search("_1") !== -1) {
       $(this).switchClass(currentClass, slicedClass + '_2');
   } else {
      $(this).switchClass(currentClass, slicedClass + '_1');
   }

});

告诉我这是否适合你。

编辑 这是您在评论中提供的小提琴的工作版本，请对它进行所需的更改http://jsfiddle.net/uFLsx :)

Answer 3

使用这样的东西：

$('#foo input').live('click', function () {
    var from_class = "";
    var to_class = "";

    $.each($(this).attr('class').split(/\s+/),function(i,c){
        var matches = c.match(/(\w+_)(\d)/i);               
        if(matches != null)
        {
            from_class = matches[0];
            from_number = matches[2];
            to_number = (matches[2] == '1')?'2':'1';
            to_class = matches[1]+to_number;
            return false;   // Stop the loop since we found the class.
        }
    });
    if(from_class != "" && to_class != "")
    {
        $(this).switchClass(from_class,to_class);
    }
});

就像 Johannes Klauß 所说，如果您使用的是新版本的 jQuery，请使用 .on() 而不是 .live()。