附加到ID的JQuery ID更改類然後通過ID和新類名重新獲取相同的項目

需要指定ID及其更改的類名以將其更改回來。我正在HTML自動點唱機上的3個按鈕之間切換。所以如果在選擇它之後再次點擊相同的按鈕（搖滾） - 搖滾會沉默。附加到ID的JQuery ID更改類然後通過ID和新類名重新獲取相同的項目

按鈕動作來啓動按鈕（1 3的按鈕）

$("a#butblue").click(function(){ 
    stopall(); 
    $.fn.soundPlay({url: '../audio/lounge.mp3', playerId: 'embed_playerB', command: 'play'}); 

    $("a#butblue").removeClass("blue_off"); 

    $("a#butgreen").removeClass("green_on"); 
    $("a#butgreen").addClass("green_off"); 
    $("a#butorange").removeClass("orange_on"); 
    $("a#butorange").addClass("orange_off"); 

    $("a#butblue").addClass("blue_on"); 
}); 

function stopall() { 
    $.fn.soundPlay({playerId: 'embed_playerB', command: 'stop'}); 
    $.fn.soundPlay({playerId: 'embed_playerG', command: 'stop'}); 
    $.fn.soundPlay({playerId: 'embed_playerO', command: 'stop'}); 
}

現在，如果一個＃butblue.blue_on再次單擊我希望它關閉。試圖使用以下，但不知何故，我似乎沒有連接ID和更改類的名稱。我可以看到他們在螢火蟲，它正在改變班級。只是似乎無法得到它的處理。這可以做到嗎？（它必須是）。

：

$("a#butblue.blue_on").click(function(){ 
    stopall(); 
    $.fn.soundPlay({playerId: 'embed_playerB', command: 'stop'}); 
    $("a#butblue").removeClass("blue_on"); 
    $("a#butblue").addClass("blue_off"); 
});

來源

2011-11-30 Stuff

你就不能通過檢查元素具有類blue_or或blue_off做（如果我理解正確）

$("a#butblue").click(function(){ 
    var btn = $(this); 
    if(btn.hasClass('blue_on'){ 
     //do your stuff when it is on 
    }else if(btn.hasClass('blue_off'){ 
     //do your stuff when it is off 
    }else{ 
     //do stuff when no class has been added 
    } 
});

來源

2011-11-30 20:26:05 omarello

完美。感謝您指出了這一點。 hasClass正是需要的。每小時學習一些新東西。 – Stuff

有一件事要指出，toggleClass可能是一個更好的解決方案，正如@Adam Terison在其他答案中指出的那樣。通過這種方式，您可以避免雜耍課程，如果您錯誤地忘記刪除課程，則最終可能會同時添加blue_on和blue_off。但基本思想仍然適用於hasClass（） – omarello

隨着這個在我的口袋裏肯定會使用切換下次我得到這樣的情況。謝謝。 – Stuff

答案很簡單：從這個去：

$("a#butblue.blue_on").click(function(){

要這樣：

$("#butblue.blue_on").live('click', function(){

注意我怎麼也去掉了「一個」你的＃之前。這樣做非常低效，而且沒有必要。

更好的答案：

綁定基於ID作爲你和保存按鈕的狀態比其他類的東西，像data。即使你使用了一個類，也不要使用「blue_on」和「blue_off」來簡單地使用「active」，並且不要使用「active」類來關閉它。然後，你可以這樣做：

var $button = $('#butblue'); 
if ($button.hasClass('active')) 
// Disable stuff 
else 
// Enable stuff 
$button.toggleClass('active');

您還可以或許再使用該功能/功能是這樣的：

$('#butblue, #butorange, #butgreen').click(function() { 
    var $button = $(this); 
    var buttonColor = $(this).attr('id').replace('but', ''); //Useful? 

    if ($button.hasClass('active')) 
    // Disable stuff 
    else 
    // Enable stuff 
    $button.toggleClass('active'); 
});

來源

2011-11-30 20:22:15

謝謝。同意a和id。這是一個早期版本的結轉。 – Stuff

附加到ID的JQuery ID更改類然後通過ID和新類名重新獲取相同的項目

回答

相關問題