Question

我正在尝试这样做，当你点击一个特定的图像，该图像将隐藏，然后它是相应的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>

Answer 1

使用类名而不是ID。这就是他们的目的。

Answer 2

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

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

上面抓住所有id为“_click”的元素。

Answer 3

为具有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');
});

Answer 4

假设您要对页面上的所有图像执行此操作，这是一种通常的方法：

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

        }
    });
});

Here是一个小例子。

Jquery，选择id然后选择部分相似的id

4 个答案: