JQuery двойная функция каждый - PullRequest
Новая
       5

JQuery двойная функция каждый

1 голос
/ 22 июня 2011

У меня есть следующий блок кода HTML более одного раза 

<div id="page_1" class="page">
<div class="imageDetail_bg">
    <img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->

    <div id="listThumbs">
     <div id="thumbsContainer_1" class="thumbsContainer">
        <div id="areaThumb" class="areaThumb">
        <div id="posThumb_1" class="posThumb">
            <img src="../_img/detail_car.jpg" class="detail_img" alt="">
        </div>
        </div><!--areaThumb-->

        <div id="areaThumb" class="areaThumb">
        <div id="posThumb_2" class="posThumb">
             <img src="../_img/detail_car.jpg" class="detail_img" alt="" />
        </div>
        </div><!--areaThumb--> 
            ...
            ...
            ...
</div><!--listThumbs-->
 </div><!--page-->

и следующий код jQuery: 

 $('.page').each(function(i) {
        $('.areaThumb').each(function(j) {
            $('.detail_img').eq(j).click(function(){
                $('.car_detail').eq(i).attr('src', $(this).attr('src'));
            });
        });
});

Что я хочу сделать: для каждой страницы естьблок больших пальцев, и когда я нажимаю на любой большой палец, изображение в #car_detail заменяется изображением большого пальца, который я щелкнул.В этот момент я могу это сделать, НО изображение #car_detail заменяется на всех страницах.Я не получаю индивидуальные действия для каждой страницы.Каждый щелчок заставляет действие происходить на всех страницах.

Может кто-нибудь сказать мне, что я делаю неправильно?Спасибо

Ответы [ 3 ]

1 голос
/ 22 июня 2011

Вам не нужно перебирать каждый элемент результата селектора jquery, чтобы связать событие щелчка.
И вам не хватает завершающего div для div thumbsContainer, добавляйте его перед каждым.

Также, если у вас есть элемент с идентификатором car_detail, вы должны использовать #car_detail вместо .car_detail

Рабочий пример @ http://jsfiddle.net/2ZQ6b/

Попробуйте это: 

$(".page .areaThumb .detail_img").click(function(){
    $(this).closest("div.page").find('.car_detail').attr("src", this.src);
});

Если для изображения car_detail используются элементы .detail_img, то вы можете упростить приведенный выше код до: 

$(".detail_img").click(function(){
    $(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
1 голос
/ 22 июня 2011

Вам нужно предоставить context вашим дочерним узлам: 

 $('.page').each(function(i) {
        $('.areaThumb', this).each(function(j) {
            $('.detail_img', this).eq(j).click(function(){
                $('.car_detail', this).eq(i).attr('src', $(this).attr('src'));
            });
        });
});

Каждый этот указывает на текущий элемент, заданный функцией jquery, которая его вызвала.

[править] Cybernate нашел лучший способ сделать то, что вы хотели. Мой ответ в основном объясняет, почему ваш код не работал так, как вы хотели

0 голосов
/ 23 июня 2011

Я думаю, что у вас неправильный подход к этому,

Вы должны просто использовать клонирование, и все будет в порядке ...

HTML 

<div class="holder">Replace Me</div>
<div>
    <div class="car"><img src="img1" /></div>
    <div class="car"><img src="img2" /></div>
</div>

JS 

$('.car').click(function(){//when you click the .car div or <img/>
    var get_car =   $(this).clone();//copy .car and clone it and it's children 
    $('.holder').html('').append(get_car);//put the clone to the holder div...
});

Я думаю, это то, что вы должны делать, просто и элегантно ... не понимаю, почему вы так усложняете:)

...