Как изменить спецификацию c img sr c при нажатии отдельных изображений с одинаковым идентификатором

Question

Я пытаюсь изменить источник отдельного изображения по щелчку div. Проблема в том, что у меня много div с одним и тем же изображением и изображения с одинаковым идентификатором. Поэтому, когда я нажимаю на первый, он меняется, но когда я нажимаю на второй, изменяется первый.

Я еще не очень хорошо разбираюсь в jquery, но я могу представить, что «Это» поможет? Или мне нужно указать разные идентификаторы для каждого img?

Чтобы увидеть проблему, вот jsfiddle> https://jsfiddle.net/gfmyukaL/

Я хочу, чтобы каждый img изменялся индивидуально на своем хост-div.

Answer 1

Я немного изменил ваш код, теперь проверьте это. У меня в основном вся ваша папка рядом с CSS, вы можете открыть их, если хотите, с помощью CSS, сообщите мне, если вам это нужно, измените CSS в соответствии с вашими потребностями. Идея состоит в том, чтобы изменить URL-адрес изображения только, ничего больше.

  var closedFolder = "http://somethingsomething.online/folder.png"
  var openFolder = "http://somethingsomething.online/folderopen.png"
  $('.test').click(function(){
     var nextMenu = $(this).next('.dropdown-menu');
     nextMenu.toggle();
     if($(nextMenu).is(':visible')){
        $(this).find('img').attr('src', openFolder);
     }else {
        $(this).find('img').attr('src', closedFolder);
     }
 });

$(document).ready(function() {
  var closedFolder = "http://somethingsomething.online/folder.png"
  var openFolder = "http://somethingsomething.online/folderopen.png"
  $('.test').click(function(){
    var nextMenu = $(this).next('.dropdown-menu');
    nextMenu.toggle();
    
    if($(nextMenu).is(':visible')){
      $(this).find('img').attr('src', openFolder);
    }else {
       $(this).find('img').attr('src', closedFolder);
    }
  });
});

.dropdown-submenu {
        position: relative;
    }

    .menu:hover {
        background-color: yellow;
    }

    * {
        font-family: monospace;
    }

    .test {
        border: red;
        
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }

    li {
        margin-left: 5vw;
    }

    .dropdown-menu {
        display: contents;
        margin-left: 2vw;

    }

    .container {
        margin: 0px;
        width: 40vw;
        padding: 0px;
    }

    #folder {
        filter: drop-shadow(1px 1px 1px red) drop-shadow(-1px -1px 1px green);
    }
    
    .dropdown-menu {
      display: none;
    }
    #mainMenu > .dropdown-submenu, #mainMenu {
      display: block;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
        <div class="dropdown">
            <ul class="dropdown-menu" id="mainMenu">
                <li class="dropdown-submenu">
                    <a class="test" tabindex="-1" href="#">
                        <div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu">
                            <a class="test" tabindex="-1" href="#">
                                <div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">3rd level dropdown</a></li>
                                <li><a href="#">3rd level dropdown</a></li>
                            </ul>
                        </li>
                        <li class="dropdown-submenu">
                            <a class="test" tabindex="-1" href="#">
                                <div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-submenu">
                                    <a class="test" tabindex="-1" href="#">
                                        <div class="menu"><img src="http://somethingsomething.online/folder.png"> Parent Directory</div>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

. Надеюсь, это поможет вам.