0

特定の画像をクリックすると、その画像が非表示になり、対応するYouTubeビデオのiframeが表示され、下にスライドするようにしようとしています。私はすでにこの作品を作りましたが、このコードを凝縮したいので、画像とビデオの組み合わせごとに入力する必要はありません。これを、＃something_clickを使用して画像に自動的に適用し、＃something_slideを使用してビデオを一致させる1つの短いコードに変換するにはどうすればよいですか？

$(document).ready(function(){   

$('#abcd_click').click(function(evt){
    evt.preventDefault();
    $(this).hide();
$('#abcd_slide').before("<br />").slideDown('slow');
});

$('#efgh_click').click(function(evt){
evt.preventDefault();
$(this).hide();
$('#efgh_slide').before("<br />").slideDown('slow');
});

オンアンドオンアンドオンアンドオン........。

編集：これが最善、最もクリーン、または最速の方法であるかどうかはわかりませんが、いくつかの答えの組み合わせを使用してトリックを実行するためにこれを取得しました。ありがとうございます！

<script type="text/javascript">
$(document).ready(function(){   
$('img[id$="_click"]').click(function(evt) {
        evt.preventDefault();
        var thisId = $(this).attr('id');
        var videoID = thisId.split('_')[0];
        $(this).hide();
        $('#'+videoID+'_slide').before('<br />').slideDown('slow');   
   });        
});    
</script>
4

4 に答える 4

2

IDの代わりにクラス名を使用してください。それが彼らの目的です。

于 2012-12-11T22:31:21.043 に答える
0

「endswith」セレクターを使用できます。

$('[id$="_click"]')

上記は、「_click」で終わるidを持つすべての要素を取得します。

于 2012-12-11T22:31:43.807 に答える
0

で要素に共通のクラスとdata-属性を割り当て、id=abcd_clickそれを呼び出し、それdata-slideを使用してスライドする要素のIDを格納します。次に、を使用.data()して取得します。このアプローチでは、すべてのインスタンスに1つのイベントハンドラーを使用できます。

HTML：

<a href="#" class="clicker" id="abcd_click" data-slide="abcd_slide">
    <img src="whatever.gif">
</a>

jQuery：

$('.clicker').click(function(evt){
    evt.preventDefault();
    $(this).hide();
    $('#'+$(this).data('slide')).before("<br />").slideDown('slow');
});
于 2012-12-11T22:39:15.740 に答える
0

ページ上のすべての画像に対してこれを実行したい場合、これを一般的に実行する1つの方法を次に示します。

$(document).ready(function(){   

    $('img').click(function(evt) {
        var thisId = $(this).attr("id");
        if(thisId && thisId.indexOf("_click") != -1)
        {
           var videoId = thisId.split("_")[0];
           evt.preventDefault();
            $(this).hide();
            $("#"+videoId+"_slide").before("<br />").show().slideDown('slow');

        }
    });
});​

これがフィドルの例です。

于 2012-12-11T22:43:43.533 に答える