使用jquery只显示img src不显示音视频src

Question

    I want following conditions in my code basically i post filefield from backend and i want to display my filefield with respective sources:
    1. When i post image, My video and audio sources should be automatically hide.
    2.  When i post video, My image and audio sources should be automatically hide.
    3.  When i post audio, My video and image sources should be automatically hide.

My jquery code: In this code my else if part is not working.I am also using template literals in that code.
        

// 读取或检索博客数据（此函数调用创建、更新和删除成功消息）

    read_retrieve_blogs()
        
        function read_retrieve_blogs() {
            var card = document.getElementById('card');
            card.innerHTML = ''
            $.ajax({
                url: "http://localhost:8000/user_blogs/",
                cache: false,
                success: function(data) {
                    var list = data
                    for (var i in list) {
        
                        var item = ` 
        
                        
        
              <img src="${list[i].image}" class="card-img-top" id="r-image" height="280" width="280" alt="...">
        
        
              <video class="card-img-top" width='400' id="r-video" controls>
              <source src="${list[i].image}" type='video/mp4'>
              </video>
        
              <audio class="card-img-top" id="r-audio" controls width="320" height="240">
              <source src="${list[i].image}" type="audio/ogg">
              </audio>
              
            
              <div class="card-body" id="card-body">
              <h5 class="card-title">${list[i].title}</h5>
              <h5 class="card-title">Written by ${list[i].author}</h5>
              <h5 class="card-title">on ${list[i].date} | ${list[i].time}</h5>
              <p class="card-text">${list[i].description}</p>
              <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
              <div class="btn-group me-2" role="group" aria-label="First group">
              <button type="button" data-id="${list[i].id}" class="btn btn-success" 
              data-bs-toggle="modal" data-bs-target="#updateModal">Update</button>
              </div>
              <div class="btn-group me-2" role="group" aria-label="Second group">
              <input type="button" data-sid="${list[i].id}" class="btn btn-danger" value="Delete" 
              onclick="return confirm('Are You Sure For Delete?')">
              </div>
              </div>
              
                  `
        
                        card.innerHTML += item
        
                        if ($('#r-image').is('[src$=".png"],[src$=".jpeg"],[src$=".jpg"]')) {
        
                            $('#r-image:not([src=""])').show();
                            $('#r-video:not([src=""])').hide();
                            $('#r-audio:not([src=""])').hide();
        
        
        
        
                        } else if ($('#r-video').is('[src$=".mp4"]')) {
        
                            $('#r-image:not([src=""])').hide();
                            $('#r-video:not([src=""])').show();
                            $('#r-audio:not([src=""])').hide();
        
                        }
                    
                    }
                }
            });
        }
        
       
          I want following conditions in my code:
    1. When i post image, My video and audio sources should be automatically hide.
    2.  When i post video, My image and audio sources should be automatically hide.
    3.  When i post audio, My video and image sources should be automatically hide.

我希望在我的代码中包含以下条件： 1.当我发布图片时，我的视频和音频源应该会自动隐藏。 2.当我发布视频时，我的图像和音频源应该会自动隐藏。 3.当我发布音频时，我的视频和图像源应该会自动隐藏。

Answer 1

[src=".png"] 查找与 src 属性完全相同的图像。如果您只想测试 URL 的结尾，请使用$=。

同一个#r-image 元素不可能有所有三个后缀，因此您应该使用|| 而不是&&。您还可以通过将选择器与 , 组合使用单个选择器来匹配其中任何一个。

要测试选择器是否匹配任何内容，请使用.length 属性。您还可以使用.is() 来测试一个元素是否与其他选择器匹配。

if $('#r-image').is('[src$=".png"],[src$=".jpeg"],[src$=".jpg"]'))

我的 HTML 代码是：

<img src="${list[i].image}" class="card-img-top" id="r-image" height="280" width="280" alt="...">