I'm trying to do this, but the loop ends after the first trigger. Any ideas to help me out?
$(document).on('click', '#configurator .myalbumimgs .autofill', function(e) {
e.preventDefault();
var nb_of_images = $('#grid div.configimg').length;
for (i = 0; i < nb_of_images; i++) {
alert(i);
$('.imgpicker .photo .add').eq(i).trigger('click');
}
});
Edit 1: Everything works fine if I remove $('.imgpicker .photo .add').eq(i).trigger('click'); and just let the loop run.
If I put a number in, like eq(3) selects the right one, but only that one. Then it stops as before.
No errors in console :S
Edit 2: Found out the correct solution, my mistake with .eq on the wrong element. Thanks for all suggestions! Correct code:
$(document).on('click', '#configurator .myalbumimgs .autofill', function(e) {
e.preventDefault();
if ($(this).not('.done')) {
var multiselector_nbimages = $('#grid').attr('data-nbimages');
var nb_images_selected = parseInt($('#grid div.configimg').not('.temp').length);
var max_nb_images = parseInt(multiselector_nbimages);
if (nb_images_selected < max_nb_images) {
var album_images = $(this).parent().parent().children('.imgpicker').children('.photo');
var nb_of_grid_images = $('#grid div.configimg.temp').length;
for (i = 0; i < nb_of_grid_images; i++) {
album_images.eq(i).children('.add').not('.selected').trigger('click');;
}
$(this).addClass('done');
} else {
alert(lang_valid_max_nb_of_photos);
}
}
});
jquery has built in each method .
$('#configurator .albumbtn.autofill').on('click', function(e) {
e.preventDefault();
//Iterate through every configimg
$('#grid div.configimg').each(function(el) {
// $(this) is current element in the list
if($(this).hasClass('someclass')) { $(this).trigger('click') }
})
});
Related
The following code adds a class to the parent of the checkbox / radio button to highlight the radio button along with the label.
Here is the jQuery code which I need to convert to JavaScript.
I am new to both jQuery and JavaScript.
Any pointers will be appreciated !!
$('form input[type=checkbox]').click ( function(){
var $this = $(this);
if (this.checked)
{ $(this).parent().addClass("highlight"); }
else
{ $(this).parent().removeClass("highlight"); }
})
$('form input[type=radio]').change(function(){
var $this = $(this);
$this.parent().parent().find('label.highlight').removeClass('highlight');
$(this).parent().addClass("highlight");
});
I think I found the solution to this.
But I am sure this is not the most efficient code so if you can think of better options then do let me know.
function checkBox(obj) {
object=obj;
if (object.checked){
object.parentElement.classList.add("highLight1");
}
else {
object.parentElement.classList.remove("highLight1");
}
}
function highlight(obj) {
object = obj;
var radios = document.getElementsByName("A1");
for(var i = 0; i < radios.length; i++) {
if(radios[i].checked){
radios[i].parentElement.classList.add("highLight1");
}
else {
radios[i].parentElement.classList.remove("highLight1");
}
}
}
I'm making a javascript quiz using a single HTML page. For some reason, my code will only display one question and upon clicking the element, it does not go to the next question. And it doesn't start the quiz with the first question.
I used a for loop inside a for loop. The first loop renders the question and then the other renders its corresponding choices. The questions and choices are held in an array containing the objects.
I've only been coding with Javascript and jQuery for a few weeks, so you'll have to tell me in beginner terms. I will have to refactor it. I apologize for it being somewhat messy.
I tried taking out the return commands. Same with preventDefault, no changes.
function renderQuiz(i) {
$heading.text("");
$mainDiv.text("");
$heading.text(quizQuestions[i].question);
for (var j = 0; j < quizQuestions[i].choices.length; j++) {
//console.log(quizQuestions[0].choices.length);
var li = document.createElement("li");
li.innerText = JSON.stringify(quizQuestions[i].choices[j]);
$mainDiv.append(li);
};
$('li').on("click", function() {
if (event.target.matches('li')) {
event.preventDefault();
var guess = event.target.innerText;
var answer = (JSON.stringify(quizQuestions[i].answer[0]));
if (guess === answer) {
timeLeft += 10;
console.log(timeLeft + "it works");
} else {
timeLeft -= 10;
console.log(timeLeft)
};
}
});
return;
};
mainPage();
$button.on("click", function(click) {
event.preventDefault();
for (var i = 0; i < quizQuestions.length; i++) {
renderQuiz(i);;
}
});
The $button click event is iterating through all of the questions, that is why the last question is the one displayed.
You need to define the variable i outside of the $button click function, then increment i on each click of the button.
var i = -1;
function renderQuiz(i) {
...
};
mainPage();
$button.on("click", function(click) {
event.preventDefault();
renderQuiz(++i);
});
There is an error in the $button onclick handler (in your console you should have "Uncaught ReferenceError: event is not defined").
If the function takes click as parameter then you should apply the method preventDefault() to that same parameter. In other words instead of
$button.on("click", function(click) {
event.preventDefault();
you should have
$button.on("click", function(event) {
event.preventDefault();
By the way there is the same error here
$('li').on("click", function() {
you should have
$('li').on("click", function(event) {
I hope this help.
function () {
var i = 0;
$('.class').click(i=i+1)
if(i=3) {
$('.class2').css('display','block');
}
}
This code does not work, Please help me.
Should be :
$(function() { //ready function
var i = 0;
$('.class').click(function(){ //Attach click event to '.class'
i=i+1; //Or i++;
if(i===3) { //Use triple equal '===' for comparaison
$('.class2').css('display','block');
}
})
})
Hope this helps.
You should bind your click event outside the function, and then track the 3rd click. You should also use a comparison operator instead of assignment. Of course, all of this should be wrapped in document ready.
var i = 0;
$('.class').on('click', function() {
i = i + 1;
if(i === 3) {
$('.class2').css('display','block');
}
});
Here is a Fiddle Demo.
I am developing an app that stays in the website itself, and I want every link to call a function. I have tried this:
HTML
link<br>
link 2
Javascript
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].onclick = function () {
return false
}
}
What is wrong? It doesn't work.
Since it's not jQuery, you should use the preventDefault function.
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].onclick = function (e) {
e.preventDefault();
doSomething();
}
}
edit for pure javascript solution
document.addEventListener("click", function(e){
if (e.nodeName==="A"){
e.preventDefault();
return false;
}
}, false);
This will only add one single event to the document and prevent all clicks on anchor elements only.
I removed the old solution because of the comment, that this wasn't a jquery question
Don't use return false, it does more than you really need. Instead try event.preventDefault()
var a = document.getElementsByTagName("a").forEach(function (e) {
e.onclick = function (a) {
doSomething(a);
return false;
}
}
}
I am trying to set up a system so that when a user clicks, if that click did not originate from within a specified div then a function should be fired that will do something with that div. Basically more when a user clicks outside of a div i want to hide it, but the problem is that i have a few elements that i want to do this with, so event.stopPropagation doesn't work very well.
document.onclick = function (e) {
e = !e ? window.event.srcElement : e.target;
if ($('#toppanel div#panel').not(e.id).is(':visible')) { $('.dashboardNav .addWidget').click(); }
if ($('#TrackRibbon').not(e.id).is(':visible')) { $('.dashboardNav #openRibbon').click(); }
if ($('.subnav').not(e.id).is(':visible')) { $('.subnav').hide(); }
}
but this doesn't work as i want either yet, it does somewhat, but i have multiple .subnav on the page and with this you can open all of them without the others closing.
any ideas on how to accomplish a goal like this would be greatly appreciated, also if i didnt explain well enough just let me know.
Would something like this work?
$(document).bind('click', function(e) {
if($(e.target).hasClass('dontTriggerThisFunction')) { return; }
doTheStuffWeWantToDo();
});
So this is how i managed to accomplish most of what I wanted. I think with a few tweaks it will be good.
$(document).click(function (e) {
var closables = ["#TrackRibbon", '#toppanel', '.subnav', '#Mailbox'];
var toggles = ['#openRibbon', '.addWidget', '.topnav > li', '#MailboxToggle'];
var skip = -1;
e = !e ? window.event.srcElement : e.target;
for (var j = 0; j < toggles.length; j++) {
if ($(e).parent(toggles[j]).length > 0 || $(e).is(toggles[j])) {
skip = j; continue;
}
}
for (var k = 0; k < closables.length; k++) {
$(closables[k]).each(function (i) {
if (skip !== k) {
if ($(this).has($(e)).length === 0 && $(this).is(':visible')) {
$(this).hide();
}
}
});
}
});
The only part that doesn't work quite right is the '.subnav' which there can potentially be a lot of. So if anyone has any suggestions to improve let me know.