0

鉴于此 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')
};
4

3 回答 3

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 :)

于 2012-04-05T22:12:28.347 回答
2

此代码将执行以下操作：

  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()or.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/

于 2012-04-05T22:15:59.043 回答
1

使用这样的东西：

$('#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() 。

于 2012-04-05T22:26:34.247 回答