Question

我正在使用以下功能在用户将鼠标悬停在其上时缩放每个图像。

$(function() {
    var imgScale = 4;
    $("img").each(function() {
        $.data(this, 'size', {
            width: $(this).width(),
            height: $(this).height()
        });
    }).hover(function() {
        $(this).stop().animate({
            height: $.data(this, 'size').height * imgScale,
            width: $.data(this, 'size').width * imgScale
    });
    }, function() {
        $(this).stop().animate({
            height: $.data(this, 'size').height,
            width: $.data(this, 'size').width
        });
    });
});

页面的基本结构如下：

<div id="product-container" style="width: 100%; overflow: auto;">
    <div id="products" style="width: 50%; display: block; float: left;">
        <h2>Products</h2>

        <div class="product">
            <div class="image">
                <a href="page.php?product=123" title="Product 123">
                    <img width="80" height="60" src="product123.jpg" />
                </a>
            </div>

            <div class="link">
                <p><a id="link-123" href="page.php?product=123" title="Product 123">Product 123</a></p>
            </div>
        </div>

        <div class="product">
            <div class="image">
                ...
            </div>

            <div class="link">
                ...
            </div>
        </div>

        ...

    </div> <!-- Close 'products' div -->

使用jQuery，我想隐藏当前没有悬停的产品的所有<p><a id="link-123"...> ... </a></p>标签。

除此之外，我想在展开的图像上创建一个文本覆盖图，它提供产品名称（例如“产品123”）。这可以从图像本身的title属性中提取。

这是一个非常早期的工作，你可能已经猜到我是jQuery的新手。我只是试图掌握jQuery的一些基本功能。

Answer 1

你必须用

隐藏所有链接

$('.link').hide();

在悬停功能中，您必须为图片找到合适的<div class="link">。您可以将树加强到<div class="product">，然后向下加<div class="product">（还有其他可能的方法来实现这一目标：

$("img").parents('.product').find('.link');

现在隐藏或显示此元素。

您的完整代码可能看起来像。

$(function() {
    $(".link").hide();
    var imgScale = 4;
    $("img").each(function() {
        $.data(this, 'size', {
            width: $(this).width(),
            height: $(this).height()
        });
    }).hover(function() {
        $(this).stop().animate({
            height: $.data(this, 'size').height * imgScale,
            width: $.data(this, 'size').width * imgScale
        }).parents('.product').find('.link').show();

    }, function() {
        $(this).stop().animate({
            height: $.data(this, 'size').height,
            width: $.data(this, 'size').width
        }).parents('.product').find('.link').hide();
    });
});

如何使用此功能隐藏某些元素？

1 个答案: