Several buttons with same action targeting different divs, compress

Question

I have a site that will showcase some singers, I have set it up so that when you click on their portrait, a div slides over and starts playing a video. There are five artist with each its own video.

So my question is this, I have several buttons, with separate targets but performing the same action. I have set it up quite rudimentary, with my very limited jQuery skills. What I want to know if there is a better way of doing this?

link to the site (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();
});

And this part.

$('#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')
});


});

score 0 · Answer 1 · answered Aug 26 '14 at 08:06

I'm not too sure what the question but if you want to reduce the length of the jQuery code snippet you provided, I'd suggest you to change the selector to something that selects all buttons in a specific criteria. It could be a css class that doesn't necessarily adds any css style or even better a custom data attribute that can be used with unobtrusive javascript code...for example suppose you have the following buttons

<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' />

notice that I added a data-field attribute in order to group the "types" of buttons, this could be whatever you want, it's mere purpose is to group them so it's easier to identify the buttons in a specific group, which obviously will have a different behaviour, and I also added the data-target attribute in order to define which element will be target when adding/removing css classes. Then, hook the onclick event for each button group...

$(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');
    });
});

And here's a JS FIDDLER EXAMPLE

Several buttons with same action targeting different divs, compress

1 Answers1