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.
Related
I want to replace #cardvieo_localstream with #cardvideo_remotestream at the first click, again I click the same element, I want to change #cardvideo_remotestream back #cardvieo_localstream, I'm not sharp at jQuery yet, but I'm trying to learn. I appreciate all help I can get.
I've try this code but working on first click. but not working on second click
$('.video-list .videoWrap').on('click', function() {
var $thisVideoWrap = $(this).find('.video-list .videoWrap');
var $mainVideoWrap = $('.mainVideoWrap');
if ($(this).attr('id') === '#cardvideo_localStream') {
$(this).attr('id', '#cardvideo_remotestream');
}
else if($(this).attr('id') == '#cardvideo_localStream') {
$(this).attr('id', '#cardvideo_local');
$mainVideoWrap.attr('id', 'cardvideo_remotestream');
}
});
Don't change An Id Attribute because of id is a unique value Only use the Classname, I swap the elements successfully
// using jQuery
var initVideoSwapping = function () {
// check if there is an element first
if ($('.video-list .videoWrap').length > 0) {
$('.video-list .videoWrap').on('click', function () {
var $thisVideo = $(this).find('video')[0];
var $mainVideo = $('.mainVideoWrap').find('video')[0];
swapNodes($thisVideo, $mainVideo)
});
}
}
function swapNodes(a, b) {
var aparent = a.parentNode;
var asibling = a.nextSibling === b ? a : a.nextSibling;
b.parentNode.insertBefore(a, b);
aparent.insertBefore(b, asibling);
}
$(function () {
initVideoSwapping();
});
How do I retrieve values from #for loop into jquery..Each value inside for loop should have different id, and jquery should get each separate id....
My for loop,
#for (int i = 0; i < searchList.Count;i++ )
{
<label for="input#i"><input type="checkbox" id="input#i"/>#searchList[i] </label>
}
My jquery which isn't helping,
$("#input#i").on("click", function () {
var currentChk = $(this);
var propCheck = currentChk.prop("checked");
if (propCheck) {
debugger;
var valChk = $("#input#i").val();
alert(valChk);
}
});
Thanks in advance...
You can use Attribute Starts With Selector to bind the event.
$("[id^=input]").on("click", function () {
var currentChk = $(this);
var propCheck = currentChk.prop("checked");
if (propCheck) {
debugger;
var valChk = $("#input#i").val();
alert(valChk);
}
});
As the id of both label and input-checkbox starts with 'input' the click event will bind to both of them. If you want to restrict you can add type to the selector, for instance you want only on checkbox you can change selector as under.
$("input[id^=input]").on("click", function () {...
or
$(":checkbox[id^=input]").on("click", function () {...
If you assign a class to the control you want to attach event then you can use class selector to bind the event.
#for (int i = 0; i < searchList.Count;i++ )
{
<label for="input#i"><input type="checkbox" class="chk-class" id="input#i"/>#searchList[i] </label>
}
$(".chk-class").on("click", function () {...
Edit As Mohamed-Yousef pointed you should use currentChk preferably or $(this) instead of $("#input#i") in statement $("#input#i").val(); as #i will not be the substituted value by C# loop but it will be added as string literal.
As a additional note you may use native javascript whenever possible and suitable e.g I would use this.checked instead of currentChk.prop("checked") to get the better performance, readability and simplicity.
$("[id^=input]").on("click", function () {
if (this.checked)
{
//your code
}
else
{
//your code
}
});
if you want to trigger onclick for all input
$("input").click(function () {
var currentChk = $(this);
var propCheck = currentChk.prop("checked");
if (propCheck) {
var valChk = "Id:" + this.id + " Value:" + this.value;
alert(valChk);
}
});
$("input:checkbox [id^=input]").click(function(){
if ($(this).is(":checked")) {
var valChk = $("this").val();
alert(valChk);
}
});
this another option you can use
I am trying to get checked options from a table which are set inline. There is a search function, which sets $(element).css('display','none') on objects in which there is no match with the search. Anyways, this piece of code will only return inline, no matter what the elements are set to. Even if I manually set all of them to display: none in the table itself, the alert will return inline for every single object in the table. Is there any solution to this?
JS code:
function pass_QR() {
var i = 0;
var array = [];
$("input:checkbox:checked").each(function () {
i++;
alert($(this).css('display'));
if ($(this).val() !== 0 && $(this).css('display') === 'inline') {
array.push($(this).val());
}
});
}
Fundamentally, css("display") does work, so something else is going on.
I suspect one of two things:
The checkboxes that you're making display: none are never checked, and so you don't see them in your each loop.
You're not making the checkboxes display: none, but instead doing that to some ancestor element of them. In that case, $(this).is(":visible") is what you're looking for.
Here's an example of #2: Live Copy | Live Source
<div id="ancestor">
<input type="checkbox" checked>
</div>
<script>
$("#ancestor").css("display", "none");
console.log("display property is now: " +
$("input:checkbox:checked").css("display"));
console.log("visible tells us what's going on: " +
$("input:checkbox:checked").is(":visible"));
</script>
...which outputs:
display property is now: inline-block
visible tells us what's going on: false
Applying that to your code:
function pass_QR() {
var i = 0;
var array = [];
$("input:checkbox:checked").each(function () {
i++;
alert($(this).css('display'));
if ($(this).val() !== 0 && $(this).is(':visible')) {
// Change is here -----------------^^^^^^^^^^^^^^
array.push($(this).val());
}
});
}
Side note: Every time you call $(), jQuery has to do some work. When you find yourself calling it repeatedly in the same scope, probably best to do that work once:
function pass_QR() {
var i = 0;
var array = [];
$("input:checkbox:checked").each(function () {
var $this = $(this); // <=== Once
i++;
alert($this.css('display'));
if ($this.val() !== 0 && $this.is(':visible')) {
// Other change is here -------^^^^^^^^^^^^^^
array.push($this.val());
}
});
}
try following:
$("input:checkbox:checked").each(function(i,o){
console.log($(this).css("display"));
});
working fiddle here: http://jsfiddle.net/BcfvR/2/
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 have a script to execute some tasks based on an option variable. Option has a default value 1. The value can be toggled by clicking some links. Then a set of operations are set, for that operations to execute. The sample layout will be like;
HTML
<a id="opt1">1</a><br><a id="opt2">2</a><br><a id="opt3">3</a><br>
<div id="mydiv">option1</div>
JS
var opt=1;
$('#opt1').click(function() {
opt=1;
});
$('#opt2').click(function() {
opt=2;
});
$('#opt3').click(function() {
opt=3;
});
if(opt == 1){
$('#mydiv').text("option1");
}else if(opt == 2){
$('#mydiv').text("option2");
}else{
$('#mydiv').text("option3");
}
JS is wrapped inside document ready function. The sample is meant to change text according to option variable. Sorry that the tasks cannot be nested inside .click(function() and are purely depend on option value. How can I achieve this?
here is the fiddle http://jsfiddle.net/Naw3y/
problem is your if condition is called just once on document.ready.. make a function , add your condition and call that function in click event
var opt=1;
$('#opt1').click(function() {
opt=1;
divText(opt); //calling divText(1) is shorter :)
});
$('#opt2').click(function() {
opt=2;
divText(opt)
});
$('#opt3').click(function() {
opt=3;
divText(opt)
});
function divText(opt){
if(opt == 1){
$('#mydiv').text("option1");
}else if(opt == 2){
$('#mydiv').text("option2");
}else{
$('#mydiv').text("option3");
}
}
not sure why aren't you calling straight away .. without if and function.. but here you go
$('#opt1').click(function() {
$('#mydiv').text("option1");
});
$('#opt2').click(function() {
$('#mydiv').text("option2");
});
$('#opt3').click(function() {
$('#mydiv').text("option3");
});
fiddle here
fiddle for second option
This should do the trick: http://jsfiddle.net/Naw3y/6/:
var opt = 1;
$(function() {
$('#opt1').click(function() {
opt=1;
changeText();
});
$('#opt2').click(function() {
opt=2;
changeText();
});
$('#opt3').click(function() {
opt=3;
changeText();
});
});
function changeText(){
if(opt == 1){
$('#mydiv').text("option1");
}else if(opt == 2){
$('#mydiv').text("option2");
}else{
$('#mydiv').text("option3");
}
}
I think what you need in your situation is 'encapsulation' of your property, and this is what the other answers lack:
var opt;
//setter function for opt that does the div update
function setOpt(value) {
opt = value;
$('#mydiv').text('option' + value);
}
$(document).ready(function() {
//bind click handlers
$('#opt1').click(function() {
setOpt(1);
});
$('#opt2').click(function() {
setOpt(2);
});
$('#opt3').click(function() {
setOpt(3);
});
//set default value
setOpt(1);
});
$(document).ready(function(){
$('a').click(function(){
$('#mydiv').text('option'+$(this).html());
});
});
Sorry If i didnt understand your question well.. try to explain better..