ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

如何在JavaScript中连接变量和字符串?

2019-10-13 01:35:56  阅读:198  来源: 互联网

标签:javascript variables string concatenation


请不要立即将其标记为重复项.我看过类似的问题,但仍然无法解决.

这是我目前拥有的:

$(document).ready(function(){
    for(var i=1;i<2;i++)
    {
        $("#MenuBarButton"+i).mouseover(function(){
            $("#ldheMenuBarLayer"+i).stop().animate({height:'66px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
        $("#MenuBarButton"+i).mouseout(function(){
            $("#ldheMenuBarLayer"+i).stop().animate({height:'41px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
    }
});

那不行什么也没有发生,并且控制台中什么也没有出现.但是,如果我在每个$函数中直接将i替换为1,那么它将起作用.

我对编程并不陌生,但是对JavaScript不熟悉,所以我做错了什么吗?谢谢!

编辑:当我说我将i替换为1时,这是因为ID为MenuBarButton1和ldheMenuBarLayer1.

解决方法:

您的基本问题是i永远只有一个值.该变量仅存在一次.事件处理程序中的代码指向变量,而不是创建事件处理程序时的值.因此,请使用如下代码:

$("#ldheMenuBarLayer"+i).stop()...

每次运行事件处理程序时,我将为2,因为我们已经完成了整个循环.

您需要使用i的值,而不是对变量的引用.为此,您可以引入一个带有匿名立即调用功能的新作用域:

for(var i=1;i<=2;i++)
{
    (function(j) {
        $("#MenuBarButton"+j).mouseover(function(){
            $("#ldheMenuBarLayer"+j).stop().animate({height:'66px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
        $("#MenuBarButton"+j).mouseout(function(){
            $("#ldheMenuBarLayer"+j).stop().animate({height:'41px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
    }(i))
}

抛开所有这些,值得一提的是,这并不是一种类似于jQuery的方法. jQuery的方式可能如下所示:

var menuBarButtons = $('.menuBarButton').mouseover(function() {
    var idx = menuBarButtons.index(this);

    $('.ldheMenuBarLayer')
        .eq(idx)
        .stop()
        .animate(
             {
                 height: '66px'
             },
             {
                 queue: false,
                 duration: 600,
                 easing: 'easeOutBounce'
             }
         );
});

该代码将无法正常工作(可能).它需要基于您的标记和页面结构.最终可能无法实现.

标签:javascript,variables,string,concatenation
来源: https://codeday.me/bug/20191013/1904499.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有