javascript中的全局变量在函数中使用后未更改
[英]global variable in javascript is not changed after being used in function
问题描述
The value of global variable var img_id = 2; 
全局变量var img_id的值= 2; is changed in click function. 点击功能改变。 Later it might be used in another function, I want the changed value of that variable in case the click function is used before buttons function. 以后它可能会用在另一个函数中，如果要在按钮函数之前使用click函数，我想更改该变量的值。 But it still shows value as 2 even if clicked function is used before it. 但是即使在其之前使用了单击功能，它仍显示为2。
function switchVisible() { if (document.getElementById('mapButtons')) { if (document.getElementById('mapButtons').style.display == 'none') { document.getElementById('mapButtons').style.display = 'block'; document.getElementById('modelButtons').style.display = 'none'; } else { document.getElementById('mapButtons').style.display = 'none'; document.getElementById('modelButtons').style.display = 'block'; } } } function flip() { $('.side').toggleClass('rotated'); } window.img_id = 2; $(function() { $('area').mouseover(function() { imgid=$(this).data('imgid'); // $('#demo').text("Mouseover for "+imgid); $('#'+imgid) .toggleClass('invert',true) .css('z-index',2); }).mouseout(function() { imgid=$(this).data('imgid'); // $('#mi').text("Mouseout for "+imgid); $('#'+imgid) .toggleClass('invert',false) .css('z-index',1); }).click(function() { imgid=$(this).data('imgid'); //$('#demo').text("click for "+imgid); $('.pressed').removeClass('pressed'); img_id= imgid; // $('#d').text("new function "+img_id); $('#'+imgid) .toggleClass('pressed') .css('z-index',2); }); }); $(function() { img = img_id; $('#d').text("new function "+img_id); //var img = 2; var min = 2; var max = 12; $('.prevButton').on('click',function(e) { if (img > min) { removeAllBorders(); img--; $('#' + img).toggleClass('pressed'); } }); $('.nextButton').on('click',function(e) { if (img < max) { removeAllBorders(); img++; $('#' + img).toggleClass('pressed'); } }); function removeAllBorders() { $('img').removeClass('pressed'); } });
#container img {position: absolute;} img.invert { filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); } img.pressed { filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); } .side { position: absolute; -webkit-transition:-webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; -o-transition: -o-transform 0.5s; transition: transform 0.5s; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; backface-visibility:hidden; } .side.rotated { -webkit-transform:rotateY(360deg); -moz-transform:rotateY(360deg); -ms-transform:rotateY(360deg); -o-transform:rotateY(360deg); transform:rotateY(360deg); } .back { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); transform:rotateY(180deg); } #mapButtons { position:absolute;top:90%;} #modelButtons { display: none; position:absolute;top:90%; } .block { width: 100%; height: 100%; -webkit-perspective:100%; -moz-perspective:100%; -ms-perspective:100%; -o-perspective:100%; perspective:100%; } #flip-button { background: white; font-family:'open sans'; font-weight: 400; color: #5b5b5b; border-radius: 5px; margin-top: 1em; } .prevButton img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .prevButton:hover img { opacity: .5; } .nextButton img { opacity: 1; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .nextButton:hover img { opacity: .3; }
<body> <map name="map" id="id_1"> <div id="container"> <div class="front side"> <img src="leftovers_ch01.png" style='position:absolute;top:8;left:9;z-index:1' usemap="#map" > <img id="2" class="myBorder" src="http://i.imgur.com/fpqmClk.png" style='z-index:1' usemap="#map" > <img id="3" class="myBorder" src="http://i.imgur.com/TfhyWZs.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > <img id="4" class="myBorder" src="http://i.imgur.com/mUKWK5P.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > <img id="5" class="myBorder" src="http://i.imgur.com/R1JhAT9.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > <img id="6" class="myBorder" src="http://i.imgur.com/yMGFR2V.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > <img id="7" class="myBorder" src="http://i.imgur.com/rpCnGxL.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > <img id="8" class="myBorder" src="http://i.imgur.com/FWRCUs4.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > <img id="9" class="myBorder" src="http://i.imgur.com/Aw3NhT9.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > <img id="10" class="myBorder" src="http://i.imgur.com/gWhUtyJ.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > <img id="11" class="myBorder" src="http://i.imgur.com/IIJqsxf.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > <img id="12" class="myBorder" src="http://i.imgur.com/a9UW5mj.png" style='position:absolute;top:8;left:9; z-index:1' usemap="#map" > </div> <area data-imgid="12" shape="poly" coords="173,223,176,222,183,224,185,217,190,199,193,192,198,187,193,176,158,132,126,92,132,93,123,79,101,97,81,123,66,149,57,170,50,194,48,211,136,217,131,225,149,225,149,221,152,221,156,215,158,208,159,197,167,189,170,179,173,177,169,171,190,176,192,187,190,190,182,198" /> <area data-imgid="11" shape="poly" coords="173,229,181,229,184,243,192,256,201,265,201,271,179,309,174,302,125,375,106,361,88,342,71,319,59,295,52,270,48,252,47,243,65,240,61,248,147,234,147,236,150,234,150,238,154,234,154,239,156,235,159,246,165,262,175,275,185,284,195,270,184,259,177,249,174,237,173,229" /> <area data-imgid="10" id="ch10" coords="208,268,220,272,234,272,249,266,253,272,235,280,223,280,214,279,215,274,202,283208,298,209,295,222,297,239,296,251,293,261,288,259,293,262,290,262,296,264,294,65,298,266,295,276,310,266,309,304,389,285,398,259,404,241,406,210,407,187,402,169,398,152,390,158,373,162,380,203,273,208,268" /> <area data-imgid="9" class="notbutton" id="ch09" class="hotspot" shape="poly" coords="252,265,255,266,256,271,267,262,275,249,279,233,296,234,291,255,282,270,272,280,268,283,274,284,270,286,274,288,271,290,275,291,272,292,328,359,319,359,331,374,349,360,366,342,381,321,392,299,400,276,404,257,407,240,318,235,323,227,278,227,272,231,269,244,262,256,252,265" /> <area data-imgid="8" class="notbutton" id="ch08" class="hotspot" shape="poly" coords="251,188,253,181,267,192,273,200,277,208,278,212,274,213,288,220,298,207,294,207,289,196,284,186,274,174,262,166,268,166,266,164,270,162,267,161,270,159,266,158,276,142,279,151,329,78,338,85,349,94,363,108,379,129,391,152,397,168,403,189,406,211,389,213,393,206,277,225,272,222,269,209,262,197,251,188" /> <area data-imgid="7" class="notbutton" id="ch07" class="hotspot" shape="poly" coords="247,186,248,182,251,179,239,175,228,173,216,174,206,177,199,161,213,157,225,156,239,157,254,162,254,158,256,159,257,155,258,157,259,152,260,154,292,72,296,79,302,63,286,56,263,50,242,47,213,47,188,51,166,57,149,64,188,143,179,143,201,181,208,185,218,182,236,182,247,186" /> <area data-imgid="6" class="notbutton" id="ch06_09" shape="poly" coords="156,234,156,226,154,222,154,226,150,223,150,226,147,224,148,227,130,227,135,220,47,213,31,223,16,212,15,226,16,236,16,243,33,254,48,243,66,240,61,248,148,233,147,236,151,234,151,237,153,234,154,239,156,234" /> <area data-imgid="6" class="notbutton" id="ch06_08" shape="poly" coords="173,230,173,227,180,224,184,228,180,230,173,230" /> <area data-imgid="6" class="notbutton" id="ch06_07" shape="poly" coords="205,264,207,268,203,272,162,380,158,372,151,389,154,407,136,417,124,412,115,406,108,401,125,394,125,375,174,302,179,309,200,271,201,266,205,264" /> <area data-imgid="6" class="notbutton" id="ch06_06" shape="poly" coords="261,288,260,291,263,290,262,295,264,293,264,297,266,295,275,309,266,309,305,389,321,397,319,415,330,412,341,405,347,400,347,379,330,374,318,359,328,359,272,292,274,291,271,289,275,288,269,287,273,284,267,284,261,288" /> <area data-imgid="6" class="notbutton" id="ch06_05" shape="poly" coords="249,264,249,268,253,273,256,271,254,266,249,264" /> <area data-imgid="6" class="notbutton"id="ch06_04" shape="poly" coords="271,227,273,223,277,225,393,206,388,214,407,211,420,200,436,210,438,218,438,229,437,242,422,231,406,240,318,235,323,227,277,227,274,230,271,227" /> <area data-imgid="6" class="notbutton" id="ch06_03" shape="poly" coords="256,163,262,166,267,165,265,164,269,162,266,161,269,159,266,158,276,142,279,150,329,78,329,59,344,51,333,45,323,39,316,36,300,45,303,63,296,80,292,72,260,154,259,153,259,158,256,155,257,159,254,158,256,163" /> <area data-imgid="6" class="notbutton" id="ch06_02" shape="poly" coords="248,189,247,183,251,180,253,181,252,186,248,189" /> <area data-imgid="6" class="notbutton" id="ch06_01" shape="poly" coords="199,191,203,188,207,192,205,187,207,185,202,182,178,142,188,143,149,64,133,55,133,37,122,44,112,49,107,53,107,73,123,78,135,93,126,93,199,183,199,191" /> <area data-imgid="5" class="notbutton" id="ch05_06" shape="poly" coords="16,212,31,223,47,214,50,189,55,169,62,152,70,136,81,120,92,107,105,93,118,82,123,79,107,73,107,54,91,65,73,83,57,101,45,119,36,137,27,158,20,183,17,202,16,212" /> <area data-imgid="5" class="notbutton"id="ch05_05" shape="poly" coords="108,401,125,394,125,375,112,366,97,352,83,336,69,316,61,298,54,280,49,261,47,243,33,255,16,244,20,270,27,293,34,313,45,334,57,352,71,369,88,385,108,401" /> <area data-imgid="5" class="notbutton" id="ch05_04" shape="poly" coords="305,389,321,398,319,415,290,427,265,433,237,436,208,436,181,432,159,426,136,417,154,407,151,391,171,399,192,404,213,407,236,407,261,404,280,399,296,393,305,389" /> <area data-imgid="5" class="notbutton" id="ch05_03" shape="poly" coords="406,240,423,231,437,242,434,264,429,285,424,302,416,320,404,341,390,360,375,376,357,391,347,399,347,380,331,374,345,363,358,350,370,336,380,323,387,309,395,294,399,279,403,265,406,247,406,240" /> <area data-imgid="5" class="notbutton"id="ch05_02" shape="poly" coords="329,77,328,58,344,52,363,66,383,85,396,101,410,123,421,144,428,164,433,182,436,199,436,210,420,200,406,211,404,191,398,169,390,149,380,131,365,110,352,97,339,86,329,77" /> <area data-imgid="5" class="notbutton" id="ch05_01" shape="poly" coords="132,55,134,37,152,30,174,23,200,18,219,17,240,17,260,19,276,22,291,26,303,31,316,36,300,45,303,63,284,55,265,51,250,48,234,46,215,47,194,49,175,53,157,60,149,64,132,55" /> <area data-imgid="5" class="notbutton" id="ch04_03" shape="poly" coords="195,270,185,284,174,273,166,263,160,251,157,240,156,226,158,211,163,195,174,180,177,177,174,175,191,176,192,191,188,189,178,203,173,219,173,233,177,248,185,261,195,270" /> <area data-imgid="4" class="notbutton" id="ch04_02" shape="poly" coords="202,283,215,275,214,279,223,280,234,280,245,277,257,271,265,264,273,253,278,241,280,233,296,235,290,257,283,269,276,276,267,285,251,292,235,297,220,297,210,295,209,298,202,283" /> <area data-imgid="4" class="notbutton" id="ch04_01" shape="poly" coords="206,177,216,174,231,173,247,177,257,183,266,191,273,201,278,212,274,213,288,220,297,207,294,208,289,196,282,184,271,172,260,165,245,159,230,156,214,157,199,161,206,177" /> <area data-imgid="2" id="ch02" shape="poly" coords="214,234,216,246,228,241,238,246,240,233,248,227,239,219,237,207,226,212,216,208,215,219,205,227,214,234" /> <area data-imgid="3" id="ch03" shape="poly" coords="181,226,189,227,181,229,182,237,186,247,192,256,199,262,203,266,207,261,206,267,213,270,222,272,232,272,242,269,250,266,247,262,251,266,259,259,265,251,269,242,272,234,272,227,267,227,272,226,271,218,269,209,264,201,257,193,250,188,247,191,247,187,239,182,226,181,214,183,207,186,205,187,208,194,203,188,196,193,189,201,184,211,181,221,181,226" /> </map> <div class="back side"> <img id="image1" src="blbl.png" style='position:absolute;top:8;left:9;' usemap="#map2" /> </div> </div> <p id="demo"></p> <p id="mi"></p> <p id="clicked"></p> <div id = "mapButtons" > <button class = "prevButton" type="button"><img id="image" src="http://i.imgur.com/PjVnMY1.png"></button> <button id="flip-button" class = "changeButton" type="button" onclick= "flip();switchVisible();"><img id="image" src="mapButton1.png"></button> <button class = "nextButton" type="button"><img id="image" src="http://i.imgur.com/sR3xfJl.png"></button> </div> <div id = "modelButtons" > <button class = "prevButton" type="button"><img id="image" src="prevButton.png"></button> <button id="flip-button" class = "changeButton" type="button" onclick= "flip(); switchVisible();"><img id="image" src="modelButton1.png"></button> <button class = "nextButton" type="button" ><img id="image" src="nextButton.png"></button> </div> <p id="d"></p> </body>
3 个解决方案
解决方案1
1 2016-03-15 15:12:47
To use a global variable, you must firstly, announce this variable with var example . 要使用全局变量，必须首先使用var example声明此变量。
However, to use it inside a function you must not reannounce it like you did, since it then announce that variable in the local function only. 但是，要在函数内部使用它，您一定不要像以前那样重新声明它，因为它随后仅在本地函数中声明该变量。
To use and edit a global variable in the local function, you only need to pass example = 5; 要在局部函数中使用和编辑全局变量，只需传递example = 5; , without reannouncing it with the "var" keyword. ，而无需使用“ var”关键字重新宣布。 The only time it must be announced is in the global scope 唯一必须宣布的时间是在全球范围内
Here is a fiddle . 这是一个小提琴 。 As you can see, i initialized the variables at the beginning (and removed 'window.img_id'), and it seems to be perfectly working. 如您所见，我在开始时初始化了变量（并删除了“ window.img_id”），它似乎运行得很好。 How have you checked your variables ? 您如何检查变量？
解决方案2
1 2016-03-15 15:15:13
Remove var img = img_id; 删除var img = img_id; and just use img_id directly in the button click listeners. 并直接在按钮点击监听器中使用img_id。 You assign img to img_id's value when the script is loaded, and from there on img and img_id take on separate lives... 加载脚本时，您将img分配给img_id的值，然后从那里开始img和img_id承担各自的职责...
解决方案3
1 已采纳 2016-03-15 15:33:30
Problem or cause: 问题或原因：
The second function() block does img = img_id inside the main function block, which is executed once and then never again after the initial page load. 第二个function（）块在主功能块内执行img = img_id ，该函数将一次执行，然后在初始页面加载后不再执行。 It also defines some event handlers, but they all use the value of img which does not change anymore ... Only the event handlers are called multiple times, but not the code that precedes them. 它还定义了一些事件处理程序，但是它们都使用了img的值，该值不再更改了 ……仅多次调用了事件处理程序，但没有调用它们之前的代码。
Solution: 解：
use img_id directly in those event handlers. 在这些事件处理程序中直接使用img_id 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
javascript全局变量在使用后变为空 - javascript global variable becomes empty after being used
全局变量未在javascript中更改（Cordova / Phonegap） - Global variable not being changed in javascript (Cordova/Phonegap)
JavaScript全局变量未更改 - JavaScript global variable not changed
全局变量由 function 更改 - global variable is changed by function
变量用作功能参数后发生变化 - Variable changes after being used as function parameter
Javascript全局变量不会在回调函数之外保持更改 - Javascript global variable not staying changed outside callback function
内部函数更改后无法访问外部函数变量 - Inner function cannot access outer function variable after being changed
Javascript-无法获取函数来设置要在函数外部使用的全局变量 - Javascript - Cannot get function to set global variable to be used outside function
将 javascript 中函数内部使用的局部变量的数据传输到全局变量/或复制到全局变量 [Javascript] - Transfer data of Local variable used inside a function in javascript to Global Variable / or copy to a global Variable [Javascript]
javascript - 在回调中定义后不在范围内的全局变量？ - javascript - global variable not in scope after being defined in callback?
相关标签