Question

我有一个会展示一些歌手的网站，我已将其设置为当您点击他们的肖像时，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')
});


});

Answer 1

我不太确定问题是什么，但如果你想减少你提供的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 EXAMPLE

几个按钮具有针对不同div的相同操作，压缩

1 个答案: