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.

Does this answer your question? [How can I select an element by name with jQuery?](https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery) — jiali, Aug 10 '21 at 10:21
A jQuery object is always truthy. If you want to know if it matched anything, test the length. — Barmar, Aug 10 '21 at 10:21
You also need to explain more about what you are trying to do with those `src` attributes — charlietfl, Aug 10 '21 at 10:25
Not really. Broken code is not a good substitute for a written explanation. Tell us exactly what you want to accomplish along with the code attempt — charlietfl, Aug 10 '21 at 10:28
Does `src="${list[i].image}"` mean that this HTML is generated in a loop in PHP? IDs have to be unique, you can't have multiple `id="r-image"`, `id="r-video"` and `id="r-audio"`. You should use classes instead of IDs, and loop through them in the JavaScript. — Barmar, Aug 10 '21 at 14:16
Now i have updated my question with jquery ajax code, Please review it. — English Voice Quotes, Aug 10 '21 at 14:34

Barmar · Answer 1 · 2021-08-10T14:02:20.857

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="...">

edited Aug 10 '21 at 14:02

answered Aug 10 '21 at 10:26

Barmar

741,623
53
500
612

It gives me an error like "#r-image".is is not a function – English Voice Quotes Aug 10 '21 at 10:34
Now I have updated my question, Please review it again. – English Voice Quotes Aug 10 '21 at 10:47
@English Voice Quotes, use: `if ($('#r-image').is('[src$=".png"],[src$=".jpeg"],[src$=".jpg"]')){ // Some codes }`. Enqueue jquery for prevent `.is is not a function`. Notice you must set element in `"` or `'` it means you must use `$('#r-image').show();` instead of `$(#r-image).show();` – jiali Aug 10 '21 at 11:17
Sorry, typo, I forgot the `$` – Barmar Aug 10 '21 at 14:02
I have a new question, How i write same code with video src file formats Hi Barmar, I post filefield from backend and i display that filefield through ajax in image, video and audio sources. I want three tasks in my code: 1. When i post only image, my video and audio sources should be automatically hide 2. When i post only video, My image and audio sources should be automatically hide 3. When i post only audio source, My video and image sources should be automatically hide – English Voice Quotes Aug 10 '21 at 14:03

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

1 Answers1