attr von mehreren img id zeigen in der zeile

Question

In meinem code habe ich 5 bilder in li tag und ersten li activeimg klasse. Ich habe einen Knopf auch. Ich will, wenn ich den Knopf klicke, sollte der gegenwärtige li die activeimg Klasse zum nächsten li entfernen und der attr ('id') dieses ersten li img sollte zeigen und wieder wenn der nächste li es auch sollte klicken entferne die Klasse activeimg zur nächsten li und die attr sollte zusammen mit der ersten li img attr ('id') erscheinen.

$(document).ready(function() { 
 
    $('.clickme').on('click', function() { 
 
    var tagname = $('.activeimg img').attr('id'); 
 
    $('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg'); 
 
    $('#resultdiv').html(tagname).val; 
 
    }); 
 
});

.menu_card ul { 
 
    list-style-type: none; 
 
} 
 

 
.menu_card ul li img { 
 
    width: 200px; 
 
    height: 300px; 
 
} 
 

 
.menu_card ul li { 
 
    list-style-type: none; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
.menu_card ul li.activeimg { 
 
    list-style-type: none; 
 
    position: absolute; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <form method="post" action=""> 
 
    <div class="row"> 
 
     <div class="col-12"> 
 
     <div class="menu_card"> 
 
      <ul id="allimg"> 
 
      <li class="activeimg"><img id="one" src="imges/img1.jpg"></li> 
 
      <li><img id="two" src="imges/img2.jpg"></li> 
 
      <li><img id="three" src="imges/img3.jpg"></li> 
 
      <li><img id="four" src="imges/img4.jpg"></li> 
 
      <li><img id="five" src="imges/img5.jpg"></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-2" style="margin-top: 350px;"> 
 
     <div class="pull-right clickme"> 
 
      <i class="fa fa-thumbs-o-up fa-3x"></i> <br/> Like 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-12 text-center" id="resultdiv"> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

In meinem Code kann ich sehe nur das img attr der aktuellen li. In meinem Fall ersetzt es immer die vorherige, wenn man auf die zweite klickt, zeigt es die zwei und eine wird gelöscht. Ich möchte, dass es wie eins, zwei, drei, vier, fünf nicht einzeln angezeigt wird.

Schlagen Sie mich vor, wenn ich Kontrollkästchen-Methode oder etwas anderes haben. vielen Dank im Voraus

My CODE

Answer 1

Basierend auf Ihrer Fiddle ich dies für den Click-Handler versucht:

var tagname = $('.activeimg img').attr('id'); 

$('.activeimg').removeClass('activeimg').next('#allimg li').addClass('activeimg'); 

if (tagname) { 
    var result = $('#resultdiv'); 
    var text = result.text().trim(); 

    if (text) { 
     text += ','; 
    } 

    result.text(text + tagname); 
} 

, die das Verhalten von Ihnen angeforderte zu geben scheint.

Ich habe diese ersten beiden Zeilen unverändert gelassen, der Rest baut den Text auf. Das einzige, was dieses Aussehen kompliziert macht, ist die Notwendigkeit von Kommas zwischen den IDs.

Die Verwendung des DOM zum Speichern eines solchen Zustands (Lesen und Schreiben des Elementtextes) ist nicht ideal, aber ich habe versucht, nicht zu weit von Ihrem ursprünglichen Code abzuweichen. Sie könnten zum Beispiel ein Array mit der Liste der geliebten Bilder haben und dann den Elementtext daraus generieren, anstatt sich auf den alten Text zu verlassen.