Cara merubah foto berdasarkan list yang di klik pada javascript


Assalamu'alaikum wr wb,
kali ini saya akan share tentang Cara merubah foto berdasarkan list yang di klik pada javascript.
Berikut ini syntaxnya.
---------------------------
<ul class="catalog" style="list-style: none;">
<li class="catalog_item catalog_item--default-view">
<div class="catalog_item_image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbDnR6PqOKGN06HUnJ9pWWs0eVAp9yIvhfOk-lxZSFkP_3lIWD1vQaB_-RZcduRQ1SzinUCBEAWgXzhdrx6ETyBipLgAVgIzWzFzf1uoMpe6_o7Cyu8V5GyyS8d0kVaSfhGXJG0M-sKE7Q/s1600/5+Perintah+Dasar+Command+Prompt+Untuk+Jaringan+yang+Sering+Digunakan.png" alt="model01" class="catalog_item_icons__big-foto" width="100" height="100">
</div>
<br><br><br>
<ul class="catalog_item_icons" style="list-style: none;">
<li class="catalog_item_icons__preview">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAVKE_2il26D1VZmzSQnwvRs1TPUN3d68Bm27SEJXqHSqYEV8UB4MM8I2BFftKX5oV-CDawv0WbJdtXGkPLb0y_ayIwtt4rtF8Or0ZCgl6iRy9mkz7K5eRHht-bALiGoZLMqd0cRiwtkMN/s640/Pengertian+Command+Prompt+%2528CMD%2529+Serta+Kumpulan+Perintah+Lengkap.jpg" alt="01" class="catalog_item_icons__preview--foto-small" width="100" height="100">
</li>
<li class="catalog_item_icons__preview">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvo-apXsw59gwtmTuyRaBNj9cbFRCBiNo629NWlNh9Ht0EcjQxpriAH7Y2zBzLyyRlnH6cafZSpIZmMlyomVlepYcNJYNrRovKY_3zF6MaZJkvjS1shMSP8CUcYKo9iONR5CatOGzK7kd/s640/command-prompt-icon.png" alt="02" class="catalog_item_icons__preview--foto-small" width="100" height="100">
</li>
<li class="catalog_item_icons__preview">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWezxTv6LBS9wXyGdc7CJMgO4mGFQipLEB1xdCkMJ9BZdrWzwF9AegSMmn5U6S90YIgDcL_mq9EvZmwbWA5tEnJR60uijBaN_ADCU-p2TbviZhTmGL-GzRWmmJpRXdPrJ1GGfk49c0Uijm/s640/command-prompt-powershell-670x335.jpg" alt="03" class="catalog_item_icons__preview--foto-small" width="100" height="100">
</li>
</ul>
</li>
</ul>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<script type="text/javascript">
$(document).ready(function() {
    //Hal ini menjalankan fungsi ketika diklik pada item
    $('.catalog_item_icons li').click(function() {
        //Mengambil sumber gambar dari elemen diklik.
        //dengan $('img', this) Anda memilih gambar dalam elemen diklik
        _src = $('img', this).attr('src');
        //Pada baris berikutnya saya menugaskan ke variabel _obj - induk .catalog_item - default-pandangan dari elemen diklik
        _obj = $(this).parents('.catalog_item--default-view');
        //Pada baris berikutnya saya mengubah atribut sumber .catalog_item_icons__big-foto yang terletak di objek _obj
        $('.catalog_item_icons__big-foto', _obj).attr('src', _src);
    });
});
</script>
---------------------------
Semoga bermanfaat.
http://pangeran-it.blogspot.co.id
Cara merubah foto berdasarkan list yang di klik pada javascript Cara merubah foto berdasarkan list yang di klik pada javascript Reviewed by Syawaluddin Amin, S.Kom on April 05, 2017 Rating: 5

Tidak ada komentar:

Diberdayakan oleh Blogger.