Question

我有这个代码块，当我在一个特定的盒子上盘旋（为了这个例子的目的，但最终悬停）时，我想用通用的jQuery代码来定位该div。我希望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>

Answer 1

尝试改变：

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

为：

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

由于您要定位一个类，因此您需要在该类前面加上句点。这似乎被遗漏了。

Answer 2

您好，我不完全确定您要完成的任务。以下是隐藏子图像并显示子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”与触发事件的元素相关联。因此，当您将click事件处理程序附加到具有.partner-box类的所有div时，只会生成事件时单击的那个。

Answer 3

请记住，当您进入此类事件时，$(this)会引用所点击的特定元素。并非所有使用您正在使用的选择器的元素。

看看这个JSFiddle：http://jsfiddle.net/ufomammut66/6y9XY/

如果你单击一个元素并在控制台中查看它，你会注意到我将它倾倒出$(this)元素。在FireFox中，如果安装了FireBug，则在输出上鼠标将显示元素$(this)在这种情况下引用。您应该注意到输出元素特定于单击的元素。

从那里你应该可以做任何你需要的动画。

Answer 4

我无法有效地解析类，所以我只为每张幻灯片制作了唯一的ID。

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

感谢所有的帮助。

使用jquery定位单击的div

4 个答案: