Jquery从源代码中动态选择src

Question

我有一个类似于以下代码的htmldiv

<div class="swiper-wrapper">
<?php for($i=0;$i<=10;$i++) { ?>
<div class="swiper-slide" id=<?php echo $i; ?>>
        <img src="videos/Capture.PNG" alt="">
        <source class="a" src="videos/test.mp4" type="video/mp4">
</div>
<?php } ?>
</div>

现在我想如果我点击swiper-slide类，那么我需要源src属性。

我试过下面的代码

<script>
   $('.swiper-slide').click(function(){
      var value = $('.swiper-slider > source').attr('src'); 
   }
</script>

在这个时候，它只适用于第一张图片。如何使其动态？

Answer 1

请注意，您的代码中有两个错误：

1. attar()应为attr()
2. 缺少事件处理程序的)

您可以将find()与$(this)一起使用。事件处理程序中的$(this)是发生事件的元素引用。

$(this)              // Element that is clicked
    .find('source')  // Get `<source>` element inside clicked element
    .attr('src');    // Get `src` attribute value

当使用$('.swiper-slide')时，它将选择DOM中具有swiper-slide类的所有元素，当对其使用attr()方法时，将返回匹配集中第一个元素的传递属性值。

Answer 2

您需要在点击事件中使用点击元素上下文this以及.find():

$('.swiper-slide').click(function(){
  var value = $('source',this).attr('src'); //or $(this).find('source').attr('src'); 
});