0

私は何人かの歌手を紹介するサイトを持っています。ポートレートをクリックすると、div がスライドしてビデオの再生を開始するように設定しました。それぞれ独自のビデオを持つ 5 人のアーティストがいます。

私の質問はこれです。いくつかのボタンがあり、ターゲットは別々ですが、同じアクションを実行します。非常に限られた 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コードで使用できるカスタムデータ属性をさらに適切に追加する必要がないcssクラスである可能性があります...たとえば、次のボタンがあるとします

<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-targetcss クラスを追加/削除するときにどの要素がターゲットになるかを定義するために属性を追加しました。次に、各ボタン グループの 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 に答える