Question

我有一个html div，如下面的代码

<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类然后我需要source src属性。

我试过下面的代码

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

此时它仅适用于第一张图像。如何让它变得动态？

Answer 1

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

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

Answer 2

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

attar()应为attr()
缺少事件处理程序的)。

您可以将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()方法时，传递的值返回匹配集中第一个元素的属性。

Jquery动态地从源中选择src

2 个答案: