我有三个按钮(跨度),如下所示:
<span id="size_default"><?php echo JText::_('VIDEO_DEFAULT');?></span>
<span id="size_450"><?php echo JText::_('VIDEO_450');?></span>
<span id="size_600"><?php echo JText::_('VIDEO_600');?></span>
这些应该像按钮一样工作,它们现在可以工作,但不正确,我需要的是,例如,当单击“size_600”时,必须发生 2 个操作 ->
<span id="size_600">
必须获得一个“事件”类+删除其他 2 个跨度上的“事件”类(如果之前被单击),然后将一个类添加到 OTHER div 并删除与其他 2 个跨度相关的其他类...
我所做的描述可能看起来很困惑,但是这是我编写的 jQuery 代码,这样应该更清楚:
$('size_default').addEvent('click',function(){
$('size_default').addClass('active');
$('youtube-player').addClass('h_355');
$('size_450').removeClass('active');
$('size_600').removeClass('active');
$('youtube-player').removeClass('h_450');
$('youtube-player').removeClass('h_600');
});
$('size_450').addEvent('click',function(){
$('size_450').addClass('active');
$('youtube-player').addClass('h_450');
$('size_355').removeClass('active');
$('size_600').removeClass('active');
$('youtube-player').removeClass('h_355');
$('youtube-player').removeClass('h_600');
});
$('size_600').addEvent('click',function(){
$('size_600').addClass('active');
$('youtube-player').addClass('h_600');
$('size_355').removeClass('active');
$('size_450').removeClass('active');
$('youtube-player').removeClass('h_355');
$('youtube-player').removeClass('h_450');
});
目前,当您为每 3 个跨度(按钮)单击一次时,它“确实”起作用,但此后只有第一个 jQuery 代码块起作用(size_default)...
有人可以帮我解决这个问题吗?我不太擅长 jQuery...
谢谢
最佳答案
您的帖子中缺少 id="youtube-player"
。
如果您正在使用 Mootools 和 jQuery 可以更安全地避免使用 Mootools $
。
所以试试这个:
var all_spans = document.getElements('span#size_default,span#size_450,span#size_600');
document.id('size_default').addEvent('click', function () {
all_spans.removeClass('active');
this.addClass('active');
document.id('youtube-player').removeClass('h_450').removeClass('h_600').addClass('h_355');
});
document.id('size_450').addEvent('click', function () {
all_spans.removeClass('active');
this.addClass('active');
document.id('youtube-player').removeClass('h_355').removeClass('h_600').addClass('h_450');
});
document.id('size_600').addEvent('click', function () {
all_spans.removeClass('active');
this.addClass('active');
document.id('youtube-player').removeClass('h_355').removeClass('h_450').addClass('h_600');
});
您可以在这个FIDDLE中查看控制台
关于jquery - 三个按钮(span 的),jQuery IF 单击,addClass - removeClass,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18815508/