/    Sign up×
Community /Pin to ProfileBookmark

Variable in jQuery / JS

Hello everyone,
I have a question regarding a variable in jQuery. I put the link to the image of my code at the end of this post.

Here is my question : I have only defined var openedIndex = -1. So the value of openedIndex is -1. Now in the line 14 and 21, I use this variable to compare it with another, but it is clear that openedIndex can’t be = -1, or nothing would work. Or the code works perfectly fine.

So, if nothing happened between its definition at -1, and the part of the code where it is used, how can it be different from -1 ?

If, for example, I would have written openedIndex = $(this).children().index() … I would understand how its value can change, but here nothing of the sort happened. So I don’t understand how can it change value if no function applies such principle to it.

Can someone help me understand ?

(I hope I made myself clear, I am French so I don’t speak fluent English, sorry ^^)

Thank you

Here is the link to the image of my code : https://zupimages.net/viewer.php?id=21/51/u6y5.png

to post a comment
JavaScript

11 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumDec 21.2021 — @Frederic#1640756 Hi Frederic and welcome to the forum! Please don't post code as an image but copy and paste it instead and use code tags: `your code here` or triple backticks.

Other members may want to setup a test file and this would require typing in the code again if it's posted as an image. And additionally the code is not searchable.
Copy linkTweet thisAlerts:
@FredericauthorDec 21.2021 — @Sempervivum#1640757 Hello and thank you for your welcome.

Here is the code :

$(function(){
var $mainMenuItems = $("main-menu ul").children("li"),
totalMainMenuItems = $mainMenuItems.length,
openedIndex = -1,
<br/>
<i> </i>init = function(){
<i> </i> $mainMenuItems.children(".images").click(function(){
<i> </i> var newIndex = $(this).parent().index(),
<i> </i> $item = $mainMenuItems.eq(newIndex);

if(openedIndex === newIndex){
animateItem($item,false,250);
openedIndex = -1;
}
else{
if(validIndex(newIndex))
{
animateItem($mainMenuItems.eq(openedIndex),false,250);
openedIndex = newIndex;
animateItem($item,true,250);
}
}
})
},
<br/>
validIndex = function(indexToCheck){
return(indexToCheck &gt;= 0) &amp;&amp; (indexToCheck &lt; totalMainMenuItems);
},

animateItem = function($item,toOpen,speed){
var $colorImage = $item.find(".color"),
itemParam = toOpen ? {width:"420px"}:{width:"140px"},
colorImageParam = toOpen ? {left:"0px"}:{width:"140px"};
$item.animate(itemParam,speed);
};

init();

});
Copy linkTweet thisAlerts:
@FredericauthorDec 21.2021 — (my code works perfectly fine, I'm just asking to understand)

My question is ... considering that **openedIndex** is defined as = -1, but in _if(openedIndex === newIndex)_ and in _animateItem($mainMenuItems.eq(openedIndex),false,250);_ the value of **openedIndex** can't be -1, otherwhise my code wouldn't work, how can it be different from this number ? Considering that nothing between its definition as = -1 and its use in the two _if_ as occurred.

If **openedIndex** would be =$(this).children().index(); I would understand how it can change, but here no function is defined to make that number change, so I don't understand ...
Copy linkTweet thisAlerts:
@SempervivumDec 21.2021 — openedIndex is modified in this line (note the arrow <---) in the else path:
``<i>
</i> init = function () {
$mainMenuItems.children(".images").click(function () {
var newIndex = $(this).parent().index(),
$item = $mainMenuItems.eq(newIndex);

if (openedIndex === newIndex) {
animateItem($item, false, 250);
openedIndex = -1;
}
else {
if (validIndex(newIndex)) {
animateItem($mainMenuItems.eq(openedIndex), false, 250);
openedIndex = newIndex; // &lt;---
animateItem($item, true, 250);
}
}
})
},<i>
</i>
``

openedIndex is indicating which item is enlarged or opened currently.

After loading the file, at the first click, the script runs into the else path, sets opened index to the item having been clicked and enlarges that item.
Copy linkTweet thisAlerts:
@FredericauthorDec 21.2021 — @Sempervivum#1640761 Thank you, I did not realized that the line **animateItem($mainMenuItems.eq(openedIndex), false, 250);** could be not doing anything the first time the page was load, and then works once openedIndex has changed its value with newIndex.

Thank you for your help, your time, and it's a great joy to see such a good community here. I will be happy to ask and help with you guys.

Great Day,

Fred
Copy linkTweet thisAlerts:
@FredericauthorJan 10.2022 — Sorry to post here, but I want to start another post but the message : "You do not have the permission to do that" keep popping ... Any idea why ?
Copy linkTweet thisAlerts:
@SempervivumJan 10.2022 — Did you post anything containing script tags? This will be rejected by the forum software.
Copy linkTweet thisAlerts:
@FredericauthorJan 10.2022 — Oh apparently it's the php tags which I was tried to use that blocks my post. Am I supposed to just not write them or maybe without the tags ? just "?php" ?
Copy linkTweet thisAlerts:
@SempervivumJan 10.2022 — Simply omit them and title the code block by "PHP".
Copy linkTweet thisAlerts:
@FredericauthorJan 10.2022 — Thank you
Copy linkTweet thisAlerts:
@NogDogJan 10.2022 — Just testing with </code></span></C> tags...
<CODE lang="php">[code=php]<i>
</i>&lt;php
echo "This is a test.";
<i>&gt;</i>
×

Success!

Help @Frederic spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...