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
Reviewed by Syawaluddin Amin, S.Kom
on
April 05, 2017
Rating:
Tidak ada komentar: