toggle div with a class name derived from a parameter - javascript

I am having a JavaScript function where the classname comes as a parameter. So i want to toggle() the specific class name which came in the parameter. How should i do this? I tried like this but it doesnt work.
function hideclass(classval){
$("#divname.classval").toggle();
}

try this
function hideclass(classval){
$("#divname."+classval).toggle();
}
or
function hideclass(classval){
$("#divname").hasClass(classval).toggle();
}

Simply concatenate the value to the text of the selector:
function hideclass(classval){
$("#divname." + classval).toggle();
}

Related

How to create href link to function

I want to create link that send to function:
tdLink2.innerText="Delete";
tdLink2.href="javascript:deleteDepartment(id)"
but the "id" parameter was not sent.
How can I insert the parameter?
ID is not parsed in your string
EITHER (Don't forget the extra quotes if ID is a string
tdLink2.href="javascript:deleteDepartment('"+id+"')"
alternative with template literals
tdLink2.href=`javascript:deleteDepartment('${id}')`;
I would personally keep DELETE far away from a href
This is better
tdLink2.href="#"
tdLink2.addEventListener("click",function(e){
e.preventDefault(); /stop the link
deleteDepartment(id); // id is some global variable
})
EVEN better is to do
tdLink2.href="#";
td.dataset.id = id; // assign to a data attribute
tdLink2.addEventListener("click",function(e){
e.preventDefault(); // stop the link
deleteDepartment(this.dataset.id); // pass the data attribute
})
If id is already a defined variable then you can do like this:
tdLink2.href=`javascript:deleteDepartment(${id})`
You can do this if it is of type string.
Otherwise you can go for this:
function f(){
deleteDepartment(id)
}
tdLink2.href='javascript:f()'
Just assign function result to property
tdLink2.href = deleteDepartment(id);

get Id of input field using JavaScript

I have input in grid, which each unique ID, output as following;
I want to know what is equivalent to $(this).attr("ID") in javaScript
function load_getUserListByGroupID()
{
var selectedGroupID = document.getElementById('input');
alert(selectedGroupID);
}
You can simply get it using .id attribute like this:
this.id;
Or you can also use .getAttribute() method:
this.getAttribute('id')
So your example should be, like this:
function load_getUserListByGroupID(element) {
alert(element.id);
}
aa
Pass this to onclick event handler. Then you can directly get its id.
Use
Script
function load_getUserListByGroupID(elem){
alert(elem.id);
}
Use a variable,
onClick="reply_click(this.id)"
function reply_click(clicked_id)
{
alert(clicked_id);
}
Add the OnClick function the element you'd like, this will also throw the ID value when processing to the function.
Hope this helps :)

Why isn't this jQuery firing on click? (w/ radio buttons)

function showHideSoldTo() {
if ($("#radio-text-sold-to").prop("checked")) {
$("#select-sold-to").hide();
$("#text-sold-to").show();
} else if ($("#radio-select-sold-to").prop("checked")) {
$("#text-sold-to").hide();
$("#select-sold-to").show();
}
}
$("#radio-text-sold-to").click(showHideSoldTo());
$("#radio-select-sold-to").click(showHideSoldTo());
All this is inside a document ready wrapper.
Remove the () from the function names in the click call. So..
$("#radio-text-sold-to").click(showHideSoldTo);
...
Remove the () from the function names in the click call
just try like
$("#radio-text-sold-to").click(showHideSoldTo);
$("#radio-select-sold-to").click(showHideSoldTo);
The problem is with the value you pass to the .click() method it's supposed to be a function value but instead you are invoking the function and as a result passing the return value of that function (which is equal to undefined)
the fix is simple you need to remove the () in these two lines
$("#radio-text-sold-to").click(showHideSoldTo());
$("#radio-select-sold-to").click(showHideSoldTo());
So they become
$("#radio-text-sold-to").click(showHideSoldTo);
$("#radio-select-sold-to").click(showHideSoldTo);
in javascript any identifier identifies a value. That value might be a simple value such as an integer or it might be a more complex object and as is the case with the value you pass as a callback or event handler it might be a function value.
These two lines of code are basically the same
function myFoo() {}
var myFoo = function() {}
and in the latter it's explicit that the right hand side is assigned to the left hand side. Ie that the function value is assigned to an identifier.

Do something in jquery if element has exact property & value

I want to do something in jquery if my element has a given property & value.
This is what I'm trying that doesn't work:
if ($('.myElement').css('opacity','1')){
console.log('test');
}
What is the correct syntax for this?
The second paramter of css() sets the style, not passing that parameter returns the current style for you to check against a string :
if ($('.myElement').css('opacity') == '1'){
console.log('test');
}
To get the css style we use $(element).css(propertyname);
to set style we use $(element).css(propertyname,value);
if ($('.myElement').css('opacity') == 1){
console.log('test');
}
.css()

insert random numbers into a class

If I do this:
$('.classname').html(Math.floor(Math.random()*10)+1);
All of "classname" is filled with the same number.
Is it possible to fill every instance of "classname" with a different random number?
The only possible way I can think of solving this is to go through each instance of "class name" and apply a random number one by one.
.html()
$(".classname").html(function(idx, oldValue) {
return (Math.floor(Math.random()*10)+1);
});
fiddle
the html method has an "overload" that accepts a function. The function should return the value to set the inner html to. In your case you can do:
$(".classname").html(function() {
return (Math.floor(Math.random()*10)+1);
});
the function is actually called with two arguments. The first is the index of the element in the selection and the second is the current value of the elements inner html
You can use jQuery's .each() function to iterate over each element matching the selector you provide -
$.each('.classname',function(index,elem){
var newRandomNumber = (Math.random()*10)+1;
$(elem).html(Math.floor(newRandomNumber));
});
For every iteration of the each() function, you'll have the index of the element you are on and the element itself in the elem parameters.
http://api.jquery.com/jQuery.each/
try this
$('.classname').each(function(index) {
$(this).html(Math.floor(Math.random()*10)+1);
});
Yes. The easiest way to do so would be using the jQuery each function:
$('.classname').each(function() {
$(this).html(Math.floor(Math.random()*10)+1);
});

Categories