How to call a jquery event trigger while using a loop? - javascript

I have a problem in dealing with my problem. My problem is I am creating a static navigation. That uses trigger event. Because I am displaying a simple collapsible div.
What I did is I include all my id name in an array and I loop it to create an event. But when I click a link i doesn't call my jquery event. Is there a way how can I prevent hard coded of navigation?
Here's my sample code:
var toggleState = true;
var header_name = ["ParentA", "ParentB", "ParentC", "ParentD"];
var child_name = ["ChildA", "ChildB", "ChildC", "ChildD"];
for (var x = 0; x < header_name.length; x++) {
$("#" + header_name[x]).click(function (e) {
if (toggleState) {
$("#" + child_name[x]).show("slide");
} else {
$("#" + child_name[x]).hide("slide");
}
toggleState = !toggleState;
});
}
<div id="ParentA">Click A</div>
<div id="ChildA" style="display: none">Child A</div>
<div id="ParentB">Click A</div>
<div id="ChildB" style="display: none">Child B</div>
<div id="ParentC">Click A</div>
<div id="ChildC" style="display: none">Child C</div>
Here's the fiddle: http://jsfiddle.net/rochellecanale/cveze/3/

change this:
var header_name = ("Parent A", "Parent B", "Parent C", "Parent D");
to this
var header_name = ["Parent A", "Parent B", "Parent C", "Parent D"];
likewise with the next variable

You need to create a local copy of x for each iteration of the loop. The simplest way to do this is to create a helper function like getClickHandler:
function getClickHandler(x) {
return function(e){
if(toggleState){
$("#" + child_name[x]).show("slide");
}else{
$("#" + child_name[x]).hide("slide");
}
toggleState = !toggleState;
};
}
for(var x = 0; x < header_name.length; x++){
$("#" + header_name[x]).click(getClickHandler(x));
}
The key point here is that the function inside click runs at a later time (asynchronously). Because of how variable scope works in Javascript, your code passes the same reference to x in to each handler, which is why all of them end up getting the last iteration of the array. Doing the above creates a copy of x at the current iteration, and stores it in a local reference (inside the handler function).

If you can make minor changes to the html it should be as simple as
<div id="ParentA" class="click-toggle" data-target="#ChildA">Click A</div>
<div id="ChildA" style="display: none">Child A</div>
<div id="ParentB" class="click-toggle" data-target="#ChildB">Click B</div>
<div id="ChildB" style="display: none">Child B</div>
<div id="ParentC" class="click-toggle" data-target="#ChildC">Click C</div>
<div id="ChildC" style="display: none">Child C</div>
then
$(document).ready(function(){
$('.click-toggle').click(function () {
$($(this).data('target')).stop(true, true).slideToggle();
})
});
Demo: Fiddle
or even
<div id="ParentA" class="click-toggle">Click A</div>
<div id="ChildA" style="display: none">Child A</div>
<div id="ParentB" class="click-toggle">Click B</div>
<div id="ChildB" style="display: none">Child B</div>
<div id="ParentC" class="click-toggle">Click C</div>
<div id="ChildC" style="display: none">Child C</div>
then
$(document).ready(function(){
$('.click-toggle').click(function () {
$(this).next().stop(true, true).slideToggle();
})
});
Demo: Fiddle, if you want to maintain left -> right slide: Fiddle
to make your code work... the main problem is the use of shared closure variable toggleState... each menu item should have its own state variable... the solution is to create a private closure for each one
$(document).ready(function () {
var header_name = ["ParentA", "ParentB", "ParentC", "ParentD"];
var child_name = ["ChildA", "ChildB", "ChildC", "ChildD"];
$.each(header_name, function (idx, id) {
var toggleState = true;
$('#' + id).click(function () {
if (toggleState) {
$("#" + child_name[idx]).show("slide");
} else {
$("#" + child_name[idx]).hide("slide");
}
toggleState = !toggleState;
})
})
});
Demo: Fiddle

Related

How to hide an item?

var r1=Math.floor(Math.random()*255)
var g1=Math.floor(Math.random()*255)
var b1=Math.floor(Math.random()*255)
$(".color1").click(function (){
$(this).css("background", "rgb(" + r1 + "," + g1 + "," + b1 + ")")
})
$(document).ready(function () {
$(document).on('click', function (event) {
$target = $(event.target);
$target.addClass('clicked');
});
})
var numItems
var getfirstclass
var getsecondclass
$('div').click(function saveclassnames(){
var getfirstclass=$(this).attr('class')
console.log(getfirstclass)
var getsecondclass=$(this).attr('class')
console.log(getsecondclass)
getfirstclass===null
getsecondclass===null
})
$('div').click(function remove(){
var numItems = $('.clicked').length
if(numItems===2 && getfirstclass === getsecondclass){
$('.clicked').css('opacity', '0')
}
else{
$('.clicked').css('background', 'black')
}
})
<body>
<div class="container">
<div class="row">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
</div>
<div class="row">
<div class="color5"></div>
<div class="color3"></div>
<div class="color1"></div>
<div class="color6"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color6"></div>
<div class="color8"></div>
<div class="color5"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color8"></div>
<div class="color4"></div>
<div class="color2"></div>
</div>
</div>
</body>
I am trying to make a game called "Memory" (if 2 flipped cards are same, the cards will disappear, but if the cards are not the same, they will flip back). But there is a difference between the original one). I am using random colors instead of card pictures, but I cannot make <div> elements with the same background-color disappear, or flip back if they are not the same. Can someone explain to me why this code does not work?
Thanks.
opacity: 0; hiding generates a lot of space although the element is not visible.
background: black; – the element needs to blend in with the background, otherwise it will not work (technically it won't work)
You can either do this:
$('yourItem').css({
display: 'none'
});
Or, the "simplest way to hide an element":
$('yourItem').hide();
For more information see https://api.jquery.com/hide/
You could use
display: none
If that messes with other stuff, use
visiblity: hidden;

tSort on jQuery object

I'm trying to sort the results of a jQuery selection with tSort.
HTML:
<div sort="2"></div>
<div sort="3"></div>
<div sort="1"></div>
<div sort="4"></div>
<div sort="6"></div>
<div sort="5"></div>
Javascript:
<script>
$sort_order = $('div').tsort({attr:'sort'});
</script>
I want the result to be: 1,2,3,4,5,6 in the jQuery object, not yet inserted into the page.
Is this possible with tSort, or should I write my own algorithm?
It is easier to do it if there is a wrapper of all the div elements.
HTML:
<div id="wrapper">
<div sort="2">2</div>
<div sort="3">3</div>
<div sort="1">1</div>
<div sort="4">4</div>
<div sort="6">6</div>
<div sort="5">5</div>
</div>
Javascript (with jQuery):
var $wrapper = $('#wrapper');
$wrapper.find('div').sort(function (a, b) {
return +a.getAttribute('sort') - +b.getAttribute('sort');
})
.appendTo($wrapper);
Working demo.
In response to #Tim's comment, you can place the elements that do not have the sort attributes at the back of the wrapper element easily, even without jQuery.
Assuming that this is your HTML:
<div id="wrapper">
<div style="color:red;">red color, without sort attribute</div>
<div style="color:red;" sort="7">red color (sort attribute=7)</div>
<div sort="2">2</div>
<div sort="3">3</div>
<div sort="1">1</div>
<div sort="4">4</div>
<div sort="6">6</div>
<div sort="5">5</div>
</div>
You can place the element(s) that do not have the sort attribute by having this as your Javascript:
// As shown earlier above,
var $wrapper = $('#wrapper');
$wrapper.find('div').sort(function (a, b) {
return +a.getAttribute('sort') - +b.getAttribute('sort');
})
.appendTo($wrapper);
// New code to add:
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++) {
if(divs[i].getAttribute('sort') == null || divs[i].getAttribute('sort') == undefined) {
divs[i].parentNode.appendChild(divs[i]);
}
}
Working demo.
clone it before using .tsort
$sort_order = $('div').clone().tsort({attr:'sort'});
DEMO

how to pass accurate multiple selections data using ui-selectable

I am useing jquery-ui selectable, I choose multiple divs, For example: divs 1-3 and divs 5-6 after the selection I pass the divs's info to an array and later to a string (strToSend). the problem is : when I choose divs 1-3 and divs 5-6 I get this Information :
for divs 1-3 : 100,200,300.
for divs 5-6 :100,200,300,400,500,600. -> what I really need is to get: 500,600.At first I thought that I need to clear my array in each loop so I tried : _info1.length = 0; _info1 = []; - no change.
I hope my problem is clear, please ideas what to do ?..
//HTML
<div class="ui-selectable" id="day" style="width: 100px; float: left;">
Sunday
<div class="ui-selectee" id="1" >100 </div>
<div class="ui-selectee" id="2" > 200 </div>
<div class="ui-selectee" id="3" > 300 </div>
<div class="ui-selectee" id="4" > 400 </div>
<div class="ui-selectee" id="5"> 500 </div>
<div class="ui-selectee" id="6"> 600 </div>
<div class="ui-selectee" id="7"> 700 </div>
</div>
//Jquery
$(function () {
$("#day").bind("mousedown", function (event) {
return event.metaKey = true;
}).selectable({
stop: function () {
_info1.push(0);
$(".ui-selected", this).each(function () {
var id = this.id;
_info1.push(id);
});
strToSend += _info1[0] + "_" + _info1[1] + "-" + _info1[_info1.length - 1] + "*";
}
});});
Here's a fiddle: http://jsfiddle.net/tS2cV/
Not sure where you're declaring your _info1 but it looks like you just want it to hold the divs you've selected. Your each function (below) goes through and grabs all divs that have been selected, so you don't have to manually push anything into it beforehand.
All I did was declare _info inside of the stop function - I'm sure what you were doing with the string to send so I removed it for simplicity:
$(function () {
$("#day").bind("mousedown", function (event) {
return event.metaKey = true;
}).selectable({
stop: function () {
var _info1 = [];
$(".ui-selected", this).each(function () {
var id = this.id;
_info1.push(id);
});
alert(_info1);
}
});});

How to auto generate id for child div in JQuery

How to auto generate id for child div in JQuery. Please help me so can i solve problem.
there is html code i want to set ids for these so can i apply operation on these.
<div id="main">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
I want to fit this. when click on + it should be max on complete div and when less it should be again on same possition.
If you try to create new div and assign it to it one possible solution may be:
<div id="parent">
</div>
for(var i = 0; i< 10; i++) { // suppose I append 10 divs to parent
$('#parent')
.append('<div id="myid_'+ i +'">child'+ i +'</div>');
}
DEMO
But if you've already child divs within parent then
<div id="parent">
<div>child 1</div>
<div>child 2</div>
<div>child 3</div>
</div>
then one possible approach would be
$('#parent div').each(function(i) {
$(this).attr('id', 'myid_' + i);
});
According to edit
<div id="main">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
$('#main .child').each(function(i) {
$(this).attr('id', 'myid_' + i);
});
DEMO
Another approach would be
$('#main .child').attr('id', function(i) {
return 'myid_' + i;
});
DEMO
There is no ways to do it automatically because live() call does not support ready event
This will give the child div's ID like child-1,child-2 etc... child-n
$(function(){
var childDivs=$("#main div");
for(var i=0;i<childDivs.length;i++)
{
$(childDivs[i]).attr("id","child-"+i);
}
});
Example : http://jsfiddle.net/nsQcR/12/
(You can check the view source to see the ID's);
To follow on to thecodeparadox's response for creating new div and assigning values, if you'd like the id and other info to be taken from a hash within an array:
arry = [{name: name1, addr: addr1, id: id1}, {name: name2, addr: addr2, id: id2}, etc...]
<div id="parent">
</div>
for(var i = 0, l = arry.length; i < l; i++) {
var obj = arry[i]
name = obj.name
pid = obj.pid
addr = obj.addr
$('#parent').append('<div id=' + pid + '>' + name + ': ' + addr + '</div>');
};

jQuery basic: How to create a loop with this structure?

This is a really simple question but I'm not sure how to search for it on the internet.
I have an empty <div id="wrap"></div> that needs to end up looking as following:
<div id="wrap>
<div class="container">
<div class="apples"></div>
</div>
<div class="container">
<div class="banana"></div>
</div>
<div class="container">
<div class="orange"></div>
</div>
<div class="container">
<div class="grapes"></div>
</div>
</div>
In jquery I have:
$(#wrap).html(''); // need this bit
var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
$('<div class="'+fruitArray[fruit]+'"></div>').appendTo('#wrap').doSomething();
}
Because I need the div with the fruitArray class to do something, I can't just wrap it around with the container class:
$('<div class="container"><div class="'+fruitArray[fruit]+'"></div></div>').appendTo...
How can I go about generating the container class in this situation?
The .wrap method returns the original set of elements for chaining purposes.
$('<div class="'+fruitArray[fruit]+'" />')
.appendTo('#wrap')
.wrap('<div class="container" />')
.doSomething();
Try this:
var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
$('<div class="' + fruitArray[fruit] + '"></div>').appendTo('#wrap').wrap('<div class="container"></div>');
}
Example fiddle
var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
$('<div class="'+fruitArray[fruit]+'" />').wrap('<div class="container" />').appendTo('#wrap').doSomething();
}
OR you can also do it like
var fruitArray = ['apples','banana','orange','grapes'];
for (fruit in fruitArray) {
$('<div class="'+fruitArray[fruit]+'" />').appendTo('#wrap').doSomething().wrap('<div class="container" />');
// this will work if the doSomething is a jquery/plugin method that is using chaining (usually they do)
}

Categories

Resources