Dispaly only img src without displaying audio and video src using jquery

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 or Retrieve blog data (this function calls in create, update and delete success messages)

    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.

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.

Answer 1

[src=".png"] looks for an image with exactly that src attribute. If you want to test just the end of the URL, use $=.

It's not possible for the same #r-image element to have all three suffixes, so you should use || instead of &&. You can also use a single selector that matches any of them, by combining selectors with ,.

To test if a selector matches anything, use the .length property. You can also use .is() to test if an element matches other selectors.

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

My HTML code is:

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