attr的多個img id在線顯示

Question

在我的代碼中，我有5個圖像在li標籤和第一個li有activeimg類。 我也有一個按鈕。我希望當我點擊按鈕時，當前李應該刪除activeimg類到下一個li和第一個li img的attr（'id'）應該顯示，再次點擊下一個li時，它也應該將activeimg類移除到下一個li，attr應該與第一個li的img attr（'id'）一起顯示。

$(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>

在我的代碼，我只能看到當前李時珍的IMG ATTR。 在我的情況下，它總是替換之前的一個，就像點擊第二個鋰時，它顯示了兩個，一個被擦除。我希望它被顯示爲一個，兩個，三個，四個，五個不是獨立的屬性。

建議我如果我必須複選框方法或其他東西。在此先感謝

My CODE

Answer 1

根據您的提琴我想這對於單擊處理

：

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); 
} 

這似乎給你所要求的行爲。

我留下了前兩行不變，其餘的內容構成了文本。唯一讓這看起來很複雜的是需要逗號之間的逗號。

使用DOM來存儲這樣的狀態（讀寫元素文本）並不理想，但我儘量不要偏離原來的代碼。例如，您可以擁有一個數組，其中包含喜歡的圖像列表，然後從中生成元素文本，而不是依賴舊文本。