附加到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和新类名重新获取相同的项目

回答

相关问题