0

以下の jQuery スクリプトに問題があります。

$('span').click(function(){
    var info = $(this).attr("rel");
    var reference = this;
    if ($(this).hasClass('listed')) {
        // alert('follow');
        $(".unlisted").addClass("unlisted-bw");
        $(".special").addClass("special-bw");
    }

    if ($(this).hasClass('special')) {
        // alert('follow');
        $(".unlisted").addClass("unlisted-bw");
        $(".listed").addClass("listed-bw");
    }   

    if ($(this).hasClass('unlisted')) {
        // alert('follow');
        $(".listed").addClass("listed-bw");
        $(".special").addClass("special-bw");
    }            
});

special1 つのスパン ( 、listedまたはunlisted) をクリックすると、他のスパンが非アクティブになるように機能させたいと考えています。jQuery でこれを行うにはどうすればよいですか?

このスクリプトを作成しましたが、正しく動作しません。 http://jsfiddle.net/3nsrd/

4

3 に答える 3

3

を使用して、他のすべてのスパンを選択できます.siblings()。次に例を示します。

$('span').click(function(e) {   
    $(this).removeClass('special-bw')
            .siblings("span")
            .addClass('special-bw');
});​

デモhttp://jsfiddle.net/3nsrd/4/

これには、個々のホバー クラスの追加は含まれません。これは、$.each各兄弟に対して a を実行し、タイトル (または別の属性) を使用することで実行できます。

$('span').click(function(e) {
    //get the name of the selected span
    selectedSpan = $(this).attr("title");

    //remove class of selected span -bw (i.e. special-bw);
    $(this).removeClass(selectedSpan+'-bw')
           .siblings("span").each(function(){
            //foreach of the other spans, add their name + bw
           $(this).addClass($(this).attr("title")+'-bw');
        });
});​

デモ: http://jsfiddle.net/3nsrd/6/

于 2012-06-06T12:43:58.847 に答える
1

私はあなたが必要としていることを実行する簡単で簡単なJavaScriptをまとめました：

$(document).ready(function() { //When the DOM is ready
    $('span').on('click', function() {
        $this = $(this);
        if (!$this.hasClass("disabled")) {
            $this.siblings().addClass("disabled");
        }
    });
});​

基本的に、兄弟に無効なクラスを追加し、次のようにスタイルを設定できます。

.disabled {
    background:#ccc;
    cursor:default;
}

実際に見てみましょう: http://jsfiddle.net/uBSX6/

于 2012-06-06T12:50:11.037 に答える
0

このフィドルはあなたのニーズに合っていると思います：

http://jsfiddle.net/3nsrd/3/

$('span').click(function(){
    var parent = $(this).parent();

    var classes = ['listed', 'special', 'unlisted'];

    for (var i = 0; i < classes.length; i++) {
        if ($(this).hasClass(classes[i])) {
            for (var j = 0; j < classes.length; j++) {
                if (classes[j] != classes[i]) {
                    $(parent).find('.' + classes[j]).addClass(classes[j] + '-bw');
                }
            }
            $(this).removeClass(classes[i] + '-bw');
            break;
        }
    }          
});​

またはネストされたループのないさらに短いバージョン:

$('span').click(function(){
    var parent = $(this).parent();

    var classes = ['listed', 'special', 'unlisted'];

    for (var i = 0; i < classes.length; i++) {
        if ($(this).hasClass(classes[i])) {
            $(parent).find(':not(.' + classes[i] + ')').each(function() {
                $(this).addClass($(this).prop('class') + '-bw');
            });
            $(this).removeClass(classes[i] + '-bw');
            break;
        }
    }          
});​
于 2012-06-06T12:43:28.170 に答える