I'm new here, can someone please help me...
i have 2 div's #main and #side.
In my #main div i have few check boxes ,
on checked event, i apend my check box label into #side div and add/remove some classes and it's working perfectly
but when i unchecked my input, it's not working not add/remove classes or apend to #main div
here is my code
$('input[type="checkbox"]').change(function() {
if (this.checked) {
$(this).next('label').removeClass("icon");
$(this).next('label').addClass("icon-active");
$(this).next('label').detach().appendTo('#side');
}
else
{ // This condition not working //
$(this).next('label').addClass("icon");
$(this).next('label').removeClass("icon-active");
$(this).next('label').appendTo('#main');
}
});
Thanks in Advance
Here is a full code.
http://jsfiddle.net/o8n1b8z1/4/
First, since you're using jQuery, I suggest you do not use this.checked, but $(this).is(':checked').
However, the reason your code is not working in reverse is because you're moving the .next('label') in DOM on checking the checkbox. So, on unchecking, .next('label') won't exactly return the label, as it is has been moved.
This is how I'd write your function:
$('input[type="checkbox"]').on('change', function(){
var label = $('label[for="'+$(this).attr('id')+'"]'),
checked = $(this).is(':checked');
label.toggleClass("icon icon-active").appendTo(checked?'#side':'#main')
})
Now, another problem with your script is that, on return, it appends the labels to the end of the div, instead of after the checkboxes. To fix that, here's what you should use:
$('input[type="checkbox"]').on('change', function() {
var label = $('label[for="' + $(this).attr('id') + '"]'),
checked = $(this).is(':checked');
label.toggleClass("icon icon-active")[
checked ? 'appendTo' : 'insertAfter'
]($(checked ? '#side' : this));
})
Updated your fiddle
Did some changes to your else statement and it works. The issue is the Label gets shifted out and the else part no longer identifies the Labels anymore.
Here is the fiddle http://jsfiddle.net/o8n1b8z1/5/
else
{ // This condition working //
var id=$(this).attr('id');
var label = $('label[for="' + id + '"]');
label.addClass("icon");
label.removeClass("icon-active");
$( "#"+id ).after(label);
}
Related
JSFIDDLE LINK
var $select = $('select');
$select.on('change', function () {
var value = $(this).val();
var modifier = value.split('_')[0];
var target = modifier + '_target';
console.log(target);
$('div').filter(target).addClass('active');
});
If you open console and select any option from the select, you'll see that the text that is thrown to the console is legit (as I want to select modifier1_target depending on the selected option).
However, I can not make a jQuery selector out of this, so as the div is selected and applied an active class.
I tried $(el).attr('class', target) but it didn't work surely.
I am running out of ideas where am I wrong here?
You have to tell jQuery that it's a class you're looking for ('.' + target):
$('div').filter('.' + target).addClass('active');
Updated Fiddle
I need to programmatically set an option of an existing select box when I only know the text of the option and not the value.
Here is my code:
$("#" + eventQuestions[x].code).find('option[text="' + eventAnswers[x].vAnswerString + '"]').attr("selected");
Don't focus too much on selecting the right html element or the right text being inside the vAnswerString - I can confirm those are correct.
Basically the option is not being selected. What is wrong with my code?
Check out this answer.
You can use that filter to check the inner text and then you put the selected attribute like this:
.attr("selected", true);
Example I tested it with:
$(function() {
$("#select").find("option").filter(function() {
return this.innerHTML == "InnerText";
}).attr("selected", true);
})
Here is a working example for jquery 1.6+.
Select the option using the filter function:
var text = "theTextToFind";
var matchingOption = $("select#myselect option").filter(function () {
return $(this).text() == text;
});
Set the value using the property function:
matchingOption.prop('selected', true);
Also check out this Answer.
So I have two divs and inside there gona be some blocks:
<div class="list-block 01">
<span>21#epos.com</span>
<span class="moveSym" id="01">+</span>
</div>
if one clicks on
+
whole block moves to other div.
Everything works but only to move ech block to another div once,
but I need them to go both ways as much as .moveSym clicked.
my JS
//remove block on click
$('.del-block').on('click', function() {
var block = $(this).attr('id');
$('.' + block).remove();
})
//move form list blocks to different fields
$('.leftSide01 .moveSym').click(function() {
console.log($(this).attr('id'));
var id = $(this).attr('id');
$(this).text("-");
$('.leftSide01 .list-block.' + id).appendTo('.rightSide01');
})
$('.rightSide01 .moveSym').click(function() {
console.log($(this).attr('id'));
var id = $(this).attr('id');
$(this).text("+");
$('.rightSide01 .list-block.' + id).appendTo('.leftSide01');
})
I know there are plugins for this, but I really want to write it by myself and learn :)
Fiddle http://jsfiddle.net/A1ex5andr/CRvVK/
Need to use event delegation, because the handler to be executed depends on the parent element.
//move form list blocks to different fields
$('.leftSide01').on('click', '.moveSym', function () {
console.log($(this).attr('id'));
var id = $(this).attr('id');
$(this).text("-");
$('.leftSide01 .list-block.' + id).appendTo('.rightSide01');
})
$('.rightSide01').on('click', '.moveSym', function () {
console.log($(this).attr('id'));
var id = $(this).attr('id');
$(this).text("+");
$('.rightSide01 .list-block.' + id).appendTo('.leftSide01');
})
Demo: Fiddle
You can really simplify this logic into one function that works for both (if there are only ever going to be two divs) . . .
$('.moveSym').click(function() {
console.log($(this).attr('id')); // I just left in, because you had it in the original code :)
var targetParent = $(".rightSide01");
var linkText = "-";
if ($(this).parent(".rigthSide01") > 0) {
linkText = "+";
targetParent = $(".leftSide01");
}
$(this).text(linkText);
$(this).parent().appendTo(targetParent);
});
This code starts out assuming that the block is on the left-hand side . . . it sets up the targetParent value (i.e., where the block will move to) to the right-hand side and the new link text to be "-".
After that, it checks to see if the block is actually on the right-hand side, instead, and, if it is, then it updates the variables with the values needed to move it to the left.
At that point, it updates the text in the "move-sym" span element to the final linkText value, and moves its parent block to the new target div (the targetParent value).
No need to worry about the delegation or event handlers in this one, because the function is the same, regardless of the location, and will travel with the "move-sym" span element, wherever it goes.
I have placed a div on top of image. On click event of div I am removing the div and then applying CSS to the image, but CSS is not getting applied .. below is the code
$('#one').live('click', function() {
$('#one').remove();
var selglobe= $('#' + globe);
selglobe.addClass('abc');
selglobe.css("border","double");
});
tried this,
HTML code:
$('#one').live('click', function() {
$('#one').remove();
console.log('HTML Globe value is ' + globe);
flipIt(this);
});
JQUERY:
function flipIt(obj){
if(status==1 )
{
alert('If'+globe);
console.log('JS Globe Value is'+globe);
var $selglobe = $('#' + globe);
$('#id11').addClass('imgnew');
$('#id12').addClass('transition');
$selglobe.addClass('anam');
$selglobe.css("border", "double");
$selglobe.css("border-color", "yellow");
}
Have a look at this jsFiddle provided by the comments:
http://jsfiddle.net/jF4mh
Check your jquery version. You are using 'live' function which has been removed from jquery 1.9. That might be the issue.
Where are you defining globe?
Anyway I would be using the on click, and just removing the element at the end.
$('#one').on('click', function() {
$('#one').remove();
var selglobe= $('#' + globe);
selglobe.addClass('abc');
selglobe.css("border","double");
});
Made a fiddle: http://jsfiddle.net/n6ub3/
I'm aware that the code has a LOT of repeating in it, its on the list to refactor once functionality is correct.
The behaviour i'm trying to achieve is if there is no selectedTab on page load, set the first tab in each group to selectedTab. If there is a selectedTab present, then use this as the default shown div.
However, as you can see from the fiddle its not working as planned!
If anyone has any ideas how to refactor this code down that'd be great also!
Change
if($('.tabs1 .tabTrigger:not(.selectedTab)')){
$('.tabs1 .tabTrigger:first').addClass('selectedTab');
}
to
if ( !$('.tabs1 .tabTrigger.selectedTab').length ) {
$('.tabs1 .tabTrigger:first').addClass('selectedTab');
}
Demo at http://jsfiddle.net/n6ub3/1/
They way you are doing it (the first code part) you are adding the .selectedTab class if there is at least one of the tabs in that group that is not selected at start .. (that means always)
Update
For a shortened version look at http://jsfiddle.net/n6ub3/7/
Your selector are doing exactly what you're writing them for.
$('.tabs3 .tabTrigger:not(.selectedTab)') is true has long as there is at least one tab that has not the selected tab (so always true in your test case).
So you should change the logic to !$('.tabs3 .tabTrigger.selectedTab').length which is true only if there are no selectedTab
WORKING DEMO with simplified code
$('.tabContent').hide();
$('.tabs').each(function(){
var search = $(this).find('div.selectedTab').length;
if( search === 0){
$(this).find('.tabTrigger').eq(0).addClass('selectedTab')
}
var selectedIndex = $(this).find('.selectedTab').index();
$(this).find('.tabContent').eq(selectedIndex).show();
});
$('.tabTrigger').click(function(){
var ind = $(this).index();
$(this).addClass('selectedTab').siblings().removeClass('selectedTab');
$(this).parent().find('.tabContent').eq(ind).fadeIn(700).siblings('.tabContent').hide();
});
That's all! You don't need all that ID's all around. Look at the demo!
With a couple of very minor changes you code can be reduced to:
$('.tabContent').hide();
$('.tabs').each(function(){
if($('.tabTrigger.selectedTab',$(this)).length < 1)
$('.tabTrigger:first').addClass('selectedTab');
});
$('.tabTrigger').click(function(){
var content = $(this).data('content');
$(this).parents('div').children('.tabContent').hide();
$(this).parents('div').children('.tabTrigger').removeClass('selectedTab');
$(this).addClass('selectedTab');
$('#' + content).show();
});
$('.tabTrigger.selectedTab').click();
Those changes are
Change the class on the surrounding div to just class="tabs.
Add a data-content attribute with the name of the associated content div
Live example: http://jsfiddle.net/gsTBQ/
Well, I'm a bit behind the times obviously; but, here's my updated version of your demo...
I have updated your fiddle as in the following fiddle: http://jsfiddle.net/4y3Xp/1/.
Basically I just tidied it up a bit, and to refactor I put everything in a separate function instead of having each of the cases in their own. This is basically just putting a new function in that does similar to what yours was doing (e.g. not modifying your HTML model), but I tried to clean it up a bit, and I also just made a function that took the tab number and did each of the items that way rather than needing a separate copy for each.
The main issue with the 'not' part of your query is that the function doesn't return a boolean; like all JQuery queries, it's returning all matching nodes. I just updated that part to return whether .selected was returning more than 0 results; if not, I go ahead and call the code to select the first panel.
Glad you got your problem resolved :)
$(document).ready(function(){
var HandleOne = function (i) {
var idxString = i.toString();
var tabName = '.tabs' + idxString;
var tabContent = tabName + ' .tabContent';
$(tabContent).hide();
var hasSelected = $(tabName + ' .tabTrigger.selectedTab').length > 0;
if (!hasSelected)
$(tabName + ' .tabTrigger:first').addClass('selectedTab');
var selectedTabId =
$(tabName + ' .tabTrigger.selectedTab').attr('id');
var selectedContentId = selectedTabId.replace('tab','content');
$('#' + selectedContentId).show();
$(tabName + ' .tabTrigger').click(function() {
$(tabName + ' .tabTrigger').removeClass('selectedTab');
$(tabName + ' .tabContent').hide();
$(this).addClass('selectedTab');
var newContentId = $(this).attr('id').replace('tab','content');
$('#' + newContentId).show();
});
}
HandleOne(1);
HandleOne(2);
HandleOne(3);
});