Таргетинг нажал div с jquery - PullRequest
Новая
       6

Таргетинг нажал div с jquery

1 голос
/ 22 марта 2012

У меня есть этот блок кода, в котором при наведении курсора (хотя, в конечном итоге, при наведении курсора мыши на этот пример) на конкретное поле я хочу назначить этот div универсальным кодом jQuery.Я хочу, чтобы изображение внутри div скрывалось, а новый div появлялся и анимировал ширину, скажем, 250px.Я пытался нацелиться на второй класс div, но безрезультатно.У кого-нибудь есть мысли? 

    $(document).ready(function(){
        $('.partner_box').click(function() {
            var hidden_div;
            hidden_div = $(this).attr('class').eq(1);
            //hidden_div = $(hidden_div).eq(1).html();

            //hidden_div = hidden_div:nth-child(1);

            $(hidden_div + ' img').hide();
            console.log(hidden_div);

            //alert(hidden_div);
            //alert($(hidden_div).attr('class').split(' ')[1])

            /*$('.partner_box div').animate({
                top: '0px',
                right: '0px',
                bottom: '0px',
                left: '0px',
                display: 'block',
                position: 'absolute',
                width: '200px'
            });*/
        });
    });

    <div id="partner_grid">
        <!--LINE ONE-->
        <div class="partner_box partner_box1">
            <img src="images/partners/asx.jpg" alt="ASX" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
        <div class="partner_box partner_box2">
            <img src="images/partners/beauchamp.jpg" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
        <div class="partner_box partner_box3">
            <img src="images/partners/decillion_group.jpg" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
        <div class="partner_box partner_box4">
            <img src="images/partners/dtcc.jpg" />
            <div style="display:none;">
                <p>This is the text for the slide.</p>
            </div>
        </div>
    </div>

Ответы [ 4 ]

1 голос
/ 22 марта 2012

Попытка изменить: 

$(hidden_div + ' img').hide();

на: 

$('.' + hidden_div + ' img').hide();

Так как вы нацеливаетесь на класс, вы должны предварять класс точкой.Это, кажется, не учтено.

0 голосов
/ 28 марта 2012

Я не смог эффективно проанализировать классы, поэтому я просто создал уникальные идентификаторы для каждого слайда. 

$('.partner_box').click(function() {
    var hidden_div;
    hidden_div = $(this).attr('id');
});

Спасибо за помощь, хотя.

0 голосов
/ 22 марта 2012

Помните, когда вы находитесь внутри события, подобного этому, $(this) относится к конкретному элементу, по которому щелкнули. Не все элементы с выбранным селектором.

Посмотрите на это JSFiddle: http://jsfiddle.net/ufomammut66/6y9XY/

Если щелкнуть элемент и проверить его в консоли, вы заметите, что он выводит элемент $(this). В FireFox, если у вас установлен FireBug, при наведении указателя мыши на выходной элемент будет отображаться элемент $(this), относящийся к этому случаю. Вы должны заметить, что выходной элемент относится к элементу, по которому щелкнули.

Оттуда вы сможете делать любые анимации, которые вам нужны.

0 голосов
/ 22 марта 2012

Привет, я не совсем уверен, чего вы пытаетесь достичь. Вот пример сокрытия дочернего изображения и показа дочернего элемента div 

$(document).ready(function(){
        $('.partner_box').click(function() {

            var my_image = $(this).find("img");
            var hidden_div = $(this).find("div");

            my_image.hide();
            hidden_div.show();


        });
    });

Ключевое слово "this" связано с элементом, который вызвал событие. Поэтому, когда вы присоединяете обработчик события щелчка ко всем элементам div с классом .partner-box только тот, который вызывается при создании события.

...