javascript - 如何在 jQuery 和 CSS 中减少我的代码

标签 javascript jquery html css

这是我的代码:

jQuery:

$(document).ready(function () {
        $("#news").hover(function () {
            $('#news_img').animate({
                height: 'toggle'
            }, 290, function () {
            });
        });

        $("#news1").hover(function () {
            $('#news_img1').animate({
                height: 'toggle'
            }, 290, function () {
            });
        });

        $("#news3").hover(function () {
            $('#news_img3').animate({
                height: 'toggle'
            }, 290, function () {
            });
        });

        $("#news4").hover(function () {
            $('#news_img4').animate({
                height: 'toggle'
            }, 290, function () {
            });
        });
    });

JSFIDDLE 在这里: <强> http://jsfiddle.net/huydq91/N89Kw/

我想减少我的代码,以便将来我想添加更多代码时更易于管理 <tr><td>无需在 jQuery 和 CSS 中过多编辑标签。

最佳答案

您可以通过其类 news 定位悬停元素,并通过将悬停元素的 id 中的最后数字附加到 news_img 来找到目标元素,例如

$(document).ready(function () {
    $(".news").hover(function () {
        $('#news_img' + this.id.replace('news', '')).stop(true).animate({
            height: 'toggle'
        }, 290, function () {});
    });
});

演示:Fiddle


您可以通过向图像添加一些 data-* 属性来删除悬停的 css 部分,例如

<img src="http://i853.photobucket.com/albums/ab100/vimeo1903/Showroom1_zps923b43dc.jpg" border="0" alt="Showroom1" data-hover="http://i853.photobucket.com/albums/ab100/vimeo1903/Showroom1_1_zpse41d0851.jpg" />

然后

$(document).ready(function () {
    //since the news elements has a common class, use it to target all the news elements instead of using individual ids
    $(".news").hover(function (e) {
        //you can find the `news_img` within the current news item using .find() instead of using its class to target it
        $(this).find('.news_img').stop(true).animate({
            height: 'toggle'
        }, 290);
        //find the image element within the current news
        var $img = $(this).find('.imgswap img');
        //if the current event is mouseenter then show the hover image else the src image
        //the hover handler registers 2 handler one for mouseenter another for mouseleave
        $img.attr('src', $img.data(e.type == 'mouseenter' ? 'hover' : 'src'));
    });
    //when we leaves the news elements we need to put back the original src, so store it using data api
    $('.news .imgswap img').each(function () {
        $(this).data('src', this.src);
    })
});

关于javascript - 如何在 jQuery 和 CSS 中减少我的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22926913/

相关文章:

c# - javascript 警报无法在 Razor 代码中显示其消息

javascript - 在 Phonegap 或 Cordova 中发送多条短信

javascript - 在页面加载时展开切换的 Div

javascript - 在 jquery 验证插件中添加自己的规则

javascript - 如何使用 jQuery 删除 HTML 中的动态元素

html - Internet Explorer 重定向到 Paypal 不工作

javascript - 编码中注释 'Go Horse'是什么意思?这是某种过程吗?

javascript - mapDispatchToProps 调度操作无法更新状态

javascript - 如何告诉 bxslider 更改最小图像数量?

javascript - 使用 ScrollMagic 停止带有背景的文本滚动