I am stuck on what to do when hiding a span that has a certain class name. I can't use this because it refers to the input. Here is my script:
//uncheck all checkboxes
$("input[type=checkbox]").prop("checked", false);
$("input[type=checkbox]").each( function (index) {
$(this).addClass("doc" + index);
})
$("input").change( function () {
var docName = $(this).parent().find("span");
var className = $(this).attr("class");
if(this.checked) {
$("span.noneAttached").fadeOut('slow', function () {
docName.clone().appendTo(".attachedDocuments").addClass(className).after("<br />").text();
});
}
else if (!this.checked && ($(".attachedDocuments > span").hasClass(className))) {
//hide the span with the class name
}
});
The else if checks to see if a checkbox is not checked and if the parent div contains any children with the class name. If so, hide it.
Where do I go from here? I am sure this answer is obvious, but I am just not seeing it.
Concatenate the class name to the selector like this
$("span."+className).hide();
Try this
$(".attachedDocuments span." + classname).hide();
$('.classname').hide();
$('.' + classnameasvariable).hide()
Related
Please help. I have input radio and main block.
How I can add value to variable javascript?
label first
input(type="radio" name='name' data-value='first' checked).select
label second
input(type="radio" name='name' data-value='second').select
.block
And how I can check is this radio checked? if checked function can't work.
My flag doesn't work.
And how can I know the first value after load document?
$(document).ready(function(){
$('.select').each(function(){
if($(this).is('checked')) {
className = $(this).data('value');
}
});
addBlock(className);
select();
});
function select() {
$('.select').click(function() {
if(!$(this).prop('checked')) {
className = $(this).data('value');
addBlock(className);
console.log('click');
}
});
}
function addBlock(a) {
$('.block').html('<div class="' + a + '"></div>')
}
The className variable should be declared outside of the JQuery selection. You shouldn't create global variables.
All I need is to replace the form with class="simple_form calculation" when the jQuery dropdown has been selected. Here is my jQuery.
Can I use a .replaceAll for this?
$("#role_selector_for_questions").change(function(e) {
var $dropdown = $(this);
$.get('/calculations/role/' + $dropdown.val(), function(data) {
$dropdown.after(data);
});
});
Do you need to change the class of a form element
if so you can use jQuery .removeClass to remove current class and jQuery .addClass to add new class.
$("#role_selector_for_questions").change(function(e) {
var $dropdown = $(this);
$('yourformid').removeClass('old_form_class');
$('yourformid').addClass('simple_form calculation');
$.get('/calculations/role/' + $dropdown.val(), function(data) {
$dropdown.after(data);
});
});
I don't see where your 'form' element is defined, but changing a class on the form is as simple as using removeClass() and addClass().
$('#formToAddClass').removeClass('current_class').addClass('simple_form calculation');
BTW, looks like two classes are being added here - 'simple_form' and 'calculation'. Class names do not contain spaces.
$("#role_selector_for_questions").change(function(e) {
var $dropdown = $(this);
$.get('/calculations/role/' + $dropdown.val(), function(data) {
$("#role_selector_for_questison").replaceWith( "<div></div>" );
});
});
Hi i have to hide contents of tab using submit button. I try to hide the contents but its not working.Even when i try to hide the contents through id the tab itself getting hide. I have same class name with different id's. So in this case how can i hide the contents using class name with their id ? Thanks.
Here is my code:
function hide_visibility(classname) { $(classname).hide(); }
$('#news .butt-rahmen').on('click', function(){
if($(this).attr('id') == 'saveId')
hide_visibility('#news .cont-liste-verlauf');
getNewsWidgetEdit();
});
The '.' is not necessary. Additionally, I'm assuming you forgot brackets around your if
function hide_visibility(selector) { $(selector).hide(); }
$('#news .butt-rahmen').live('click', function(){
if($(this).attr('id') == 'saveId') {
hide_visibility('#news .cont-liste-verlauf');
getNewsWidgetEdit();
}
});
That being said, live is deprecated, so you should use on. If you need to dynamically attach to .butt-rahman classed items under #news:
function hide_visibility(selector) { $(selector).hide(); }
$(document).on('click', '#news .butt-rahmen', function(){
if($(this).attr('id') == 'saveId') {
hide_visibility('#news .cont-liste-verlauf');
getNewsWidgetEdit();
}
});
I am trying to take the label text of the checkbox which are checked and I trying to append in the span tag,
When user click the the ok button in the popUp
Here it is not working. Here is my jsfiddle
My script is:
$('.modal-footer .preSuccess').click(function(){
var parentElement=$(this).parent().parent().attr('id');
$('#'+parentElement+ '.modal-body input[type="checkbox"]').each(function(){
var pre =$(this).next('label').text();
if($(this).is(':checked')){
$('.'+parentElement+'Pre').append('<span>'+pre+'</span>');
}
});
});
Try
$('.modal-footer .preSuccess').click(function () {
var modal = $(this).closest('.modal');
var parentElement = modal.attr('id'); // issue here, use closest to get a parent matching the selector
//again issue with the selector
modal.find('.modal-body input[type="checkbox"]').each(function () {
var pre = $(this).next('label').text();
if ($(this).is(':checked')) {
$('.' + parentElement + 'Pre').append('<span>' + pre + '</span>');
}
});
});
Demo: Fiddle
I took a look at your code and you're missing a space when querying the checkbox:
$('#'+parentElement+ ' .modal-body input[type="checkbox"]')
It wasn't able to find your checkbox and couldn't find the texts.
Other than that I would advice against the .parent().parent() structure, cause it's very prone to future bugs. Maybe just call the id directly, but I'm not sure how you're using this code.
What I'm doing is adding a class to all elements who have the same class name as the id I'm hovering over. For example when I hover some list item with the id of vowel, then all the span elements with the class of the name vowel get acted upon (adding a class).
I can do that with no problems. But I want to do the same thing for many other id names with corresponding class names. Examples: consonants, semi-vowels, gutturals, palatals, etc.
I could do all these with different functions but I want to do is to call a function which will perform the same tasks but will be smart enough to find the name of the id and to generate the class name from that.
How do I extract the id name into a variable and assign it to the class name.
You could use a plugin:
$.fn.highlight = function() {
return this.each(function() {
$(this).hover(function() {
var id = $(this).attr('id');
$('.'+id).addClass('myclass');
});
});
}
Which you could call like this:
$(document).ready(function() {
$('span').highlight();
});
You could do this:
$("[id]").hover(function() {
$("." + this.id).addClass("highlight");
}, function() {
$("." + this.id).removeClass("highlight");
});
but I wouldn't necessarily recommend it. I'd be more inclined to statically define it:
var ids = ["vowels", "consonants"];
for (var i = 0; i < ids.length; i++) {
$("#" + ids[i]).hover(function() {
$("." + this.id).addClass("highlight");
}, function() {
$("." + this.id).removeClass("highlight");
});
}
or something like that.