My sample html section with several items like this:
<ul class="catalog">
<li class="catalog_item catalog_item--default-view">
<div class="catalog_item_image">
<img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto">
</div>
<ul class="catalog_item_icons">
<li class="catalog_item_icons__preview"><img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"></li>
<li class="catalog_item_icons__preview"><img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"></li>
<li class="catalog_item_icons__preview"><img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"></li>
</ul>
I want to change src of img.catalog_item_icons__big-foto with src of img.catalog_item_icons__preview--foto-small
after clicking on li element only in it's parent ul.catalog.
That was my try:
$(".catalog_item_icons__preview").each(function () {
$(this).on("click", function() {
console.log('Clicked preview!');
// get image fileName
var smallImagePath = $(this).children("img").attr("src");
console.log("small image: " + smallImagePath);
var $bigPreview = $(this).closest('img.catalog_item_icons__big-foto').attr("src");
// print in console src of nearest big image
console.log($bigPreview);
});
});
I can get the src of small image, but can't even read the src of the img above in tree. Output in console: undefined. Don't understand why :(
Use this script:
$(document).ready(function() {
//It is executing a function when it is clicked on an item
$('.catalog_item_icons li').click(function() {
//Taking the source of the image of the clicked element.
//with $('img', this) you are choosing the the image in the clicked element
_src = $('img', this).attr('src');
//In the next line I am assigning to the _obj variable - the parent .catalog_item--default-view of the clicked element
_obj = $(this).parents('.catalog_item--default-view');
//In the next line i am changing the source attribute of the .catalog_item_icons__big-foto located in the _obj object
$('.catalog_item_icons__big-foto', _obj).attr('src', _src);
});
});
catalog_item_icons__big-foto is not a direct ancestor so closest will not find it. The closest metod looks at itself and than looks at parents. The element you are looking for is not a parent, it is a child of one of those parents.
Easiest thing is to look for the top li and find the image from there.
$(this).closest(".catalog_item catalog_item--default-view")
.find('img.catalog_item_icons__big-foto')
or option is to find the parent ul and find the previous sibling and than find the image.
problem is here The closest() method returns the first ancestor of the selected element.An ancestor is a parent, grandparent, great-grandparent, and so on.
var $bigPreview = $(this).closest('img.catalog_item_icons__big-foto').attr("src");
you just use class that will work for you
var $bigPreview = $('img.catalog_item_icons__big-foto').attr("src");
This may help you, check console following code is working for me
$("li.catalog_item_icons__preview").on("click", function(){
// get image fileName
var smallImagePath = $(this).children("img").attr("src");
console.log("small image: " + smallImagePath);
var bigPreview = $(this).parent('ul').siblings(".catalog_item_image").children(".catalog_item_icons__big-foto").attr("src");
// print in console src of nearest big image
console.log(bigPreview);
});
$("li.catalog_item_icons__preview").on("click", function(){ // get image fileName var smallImagePath = $(this).children("img").attr("src"); console.log("small image: " + smallImagePath); var bigPreview = $(this).parent('ul').siblings(".catalog_item_image").children(".catalog_item_icons__big-foto").attr("src"); // print in console src of nearest big image console.log(bigPreview); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="catalog"> <li class="catalog_item catalog_item--default-view"> <div class="catalog_item_image"> <img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto"> </div> <ul class="catalog_item_icons"> <li class="catalog_item_icons__preview"><img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"></li> <li class="catalog_item_icons__preview"><img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"></li> <li class="catalog_item_icons__preview"><img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"></li> </ul> </li> </ul>
Try this
$(".catalog_item_icons__preview").click(function() { $(".catalog_item_icons__big-foto").attr("src", $(this).children("img").attr("src")); console.log($(".catalog_item_icons__big-foto").attr("src")); });
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="catalog_item_image"> <img src="/img/01.png" alt="model01" class="catalog_item_icons__big-foto"> </div> <ul class="catalog_item_icons"> <li class="catalog_item_icons__preview"> <img src="/img/01-01.png" alt="01" class="catalog_item_icons__preview--foto-small"> </li> <li class="catalog_item_icons__preview"> <img src="/img/01-02.png" alt="02" class="catalog_item_icons__preview--foto-small"> </li> <li class="catalog_item_icons__preview"> <img src="/img/01-03.png" alt="03" class="catalog_item_icons__preview--foto-small"> </li> </ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.