0

我有一个展示一些歌手的网站，我已经设置好了，当你点击他们的肖像时，一个 div 会滑过并开始播放视频。有五位艺术家都有自己的视频。

所以我的问题是，我有几个按钮，具有不同的目标但执行相同的操作。我的 jQuery 技能非常有限，我已经将它设置得非常简陋。我想知道是否有更好的方法来做到这一点？

网站链接 (seduction.begop.webfactional.com)

//This is the controlls for the first (Babushka)video
var babushkavideo = document.getElementById('vid-babushka');
var playButton = document.getElementById('btn-babushka');
playButton.addEventListener('click', function(e) { 
    babushkavideo.play();
});

var stopButton = document.getElementById('cancel');
stopButton.addEventListener('click', function(e) { 
    babushkavideo.pause();

});


//This is the controllers for the second (Transformer)video
var transformervideo = document.getElementById('vid-transformer');
var playButton = document.getElementById('btn-transformer');
playButton.addEventListener('click', function(e) { 
    transformervideo.play();
});

var stopButton = document.getElementById('cancel2');
stopButton.addEventListener('click', function(e) { 
    transformervideo.pause();
});

//This is the controllers for the third (Puppet)video
var puppetvideo = document.getElementById('vid-puppet');
var playButton = document.getElementById('btn-puppet');
playButton.addEventListener('click', function(e) { 
    puppetvideo.play();
});

var stopButton = document.getElementById('cancel3');
stopButton.addEventListener('click', function(e) { 
    puppetvideo.pause();
});

//This is the controllers for the fourth (Snow Globe)video
var snowglobevideo = document.getElementById('vid-snow-globe');
var playButton = document.getElementById('btn-snow-globe');
playButton.addEventListener('click', function(e) { 
    snowglobevideo.play();
});

var stopButton = document.getElementById('cancel4');
stopButton.addEventListener('click', function(e) { 
    snowglobevideo.pause();
});

//This is the controllers for the third (Cuckoo Clock)video
var cuckooclockvideo = document.getElementById('vid-cuckoo-clock');
var playButton = document.getElementById('btn-cuckoo-clock');
playButton.addEventListener('click', function(e) { 
    cuckooclockvideo.play();
});

var stopButton = document.getElementById('cancel5');
stopButton.addEventListener('click', function(e) { 
    cuckooclockvideo.pause();
});

而这部分。

$('#btn-babushka').click(function(){
    $('#babushka').addClass('panel2')   
});

$('#btn-transformer').click(function(){
    $('#transformer').addClass('panel2')
});

$('#btn-puppet').click(function(){
    $('#puppet').addClass('panel2')
});

$('#btn-snow-globe').click(function(){
    $('#snow-globe').addClass('panel2')
});

$('#btn-cuckoo-clock').click(function(){
    $('#cuckoo-clock').addClass('panel2')
});


$('#cancel').click(function(){
    $('#babushka').removeClass('panel2')
});

$('#cancel2').click(function(){
    $('#transformer').removeClass('panel2')
});

$('#cancel3').click(function(){
    $('#puppet').removeClass('panel2')
});

$('#cancel4').click(function(){
    $('#snow-globe').removeClass('panel2')
});

$('#cancel5').click(function(){
    $('#cuckoo-clock').removeClass('panel2')
});


});
4

1 回答 1

0

我不太确定问题是什么，但如果您想减少jQuery您提供的代码片段的长度，我建议您将选择器更改为选择特定条件中的所有按钮的东西。它可能是一个 css 类，不一定添加任何 css 样式，甚至更好的是可以与不显眼的 javascript 代码一起使用的自定义数据属性...例如，假设您有以下按钮

<input id='btnOk1' type='button' data-field='ok' data-target='transformer' />
<input id='btnOk2' type='button' data-field='ok' data-target='babushka' />
<input id='btnOk3' type='button' data-field='ok' data-target='puppet' />

<input id='btnCancel1' type='button' data-field='cancel'  data-target='transformer'/>
<input id='btnCancel2' type='button' data-field='cancel' data-target='babushka' />
<input id='btnCancel3' type='button' data-field='cancel' data-target='puppet' />

请注意，我添加了一个data-field属性来对按钮的“类型”进行分组，这可以是您想要的任何内容，其目的仅仅是对它们进行分组，以便更容易识别特定组中的按钮，这显然会有不同的行为，并且我还添加了该data-target属性，以便在添加/删除 css 类时定义哪个元素将成为目标。然后，为每个按钮组挂钩 onclick 事件...

$(function(){
    $('[data-field=ok]').click(function(){
         var target = $(this).data('target');
         $('#' + target).addClass('panel2');
    });


    $('[data-field=cancel]').click(function(){
         var target = $(this).data('target');
         $('#' + target).removeClass('panel2');
    });
});

这是一个JS FIDDLER 示例

于 2014-08-26T08:06:10.983 回答