0

我正在努力做到这一点，因此当您单击特定图像时，该图像将隐藏，然后相应的 youtube 视频 iframe 将显示并向下滑动。我已经完成了这项工作，但我想压缩此代码，因此我不必为每个图像/视频组合输入它。我将如何将其变成一小段代码，自动应用于带有#something_click 的图像并使用#something_slide 匹配视频？

$(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

假设您想对页面上的所有图像执行此操作，以下是一般执行此操作的一种方法：

$(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 回答
0

您可以使用“结束于”选择器：

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

上面抓取了所有 id 以“_click”结尾的元素。

于 2012-12-11T22:31:43.807 回答
0

用 为元素分配一个通用类和一个data-属性id=abcd_click，调用它data-slide，并用它来存储要滑动的元素的ID。然后用.data()它来检索它。使用这种方法，您可以为所有实例使用一个事件处理程序：

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 回答