Question

我想在模态弹出窗口中打开图像/视频，所以我点击了一个按钮，我可以显示图像。但是当我同时拥有图像和视频时，我怎么能在jQuery中检查这些标签。

弹出式缩放图片的html代码

<div>
    <img src="image/zoom-icon.png" id="zoomImg" >
    <div class="bigthumb">
        <img src="image/main_product_img.png" id="myImg" width="350px" height="350px">
        <video class="no-display" width="350px" height="350px" controls>
           <source src="image/movie.mp4" type="video/mp4">
        </video>
    </div>
</div>

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">              
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <img src="" class="imagepreview" style="width: 100%;" >
        <video class="videopreview no-display" class="imagepreview" style="width: 100%;" controls>
            <source src="" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</div>

jQuery_file代码在这里

<script type="text/javascript">
        $('#zoomImg').on('click', function() {
        console.log($(this));
        if ( ---HERE-- ) {
            $('.imagepreview').attr('src', $('.bigthumb').find('img').attr('src'));
            $('#imagemodal').modal('show');
        } else {
            $('.videopreview source').attr('src', $('.bigthumb').find('video source').attr('src'));
            $('.videopreview').show();
            $('#imagemodal').modal('show');   
        }
    });     
</script>

在上面的脚本上我想检查是否是img tage / video tage的条件

Answer 1

您可以使用https://github.com/realm/realm-java/issues/5238

针对选择器，元素或jQuery对象检查当前匹配的元素集，如果这些元素中至少有一个与给定的参数匹配，则返回true

{{1}}

Answer 2

您可以使用nodeName属性来检查元素类型：

$(this).prop("nodeName")

或者：

this.nodeName

值为IMG或VIDEO。

Node.nodeName只读属性以字符串形式返回当前节点的名称。

参考：https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName

Answer 3

如果你正在使用jQuery，你可以使用它的is（）方法，或者你可以使用普通的JS：

$('#zoomImg').on('click', function (evt) {
  switch (evt.currentTarget.tagName) {
    case 'IMG':
      // logic here
      break
    case 'VIDEO':
      // logic here
      break
    default:
      console.warn('Unsupported zoom target')
  }
})

PS：主要是，调用.is（）方法稍快一些，因为没有执行额外的代码。

Answer 4

您可以使用nodeName来执行此操作

if(this.nodeName == 'IMG')

如何在jquery中检查标签是img还是视频？

4 个答案: