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

そのため、これを何度も行う代わりに、アンダースコアクラスを取得して、その数を1、2行にまとめ、それに応じてその数を変更することを考えました。

私はそれが次のようになると想像します：

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. すべての入力要素に1つのイベントハンドラーを使用します
  2. 非推奨.live()に置き換えます.delegate()（jQuery 1.6を使用するOP以降）
  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/

于 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);
    }
});

また、JohannesKlaußが言ったように、新しいバージョンのjQueryを使用している場合は、.live（）の代わりに.on（）を使用してください。

于 2012-04-05T22:26:34.247 に答える