Using .hide() and .show() in jQuery - javascript

In my program I have several very similar drop-down menus all with the same name (foo in the following example). On change they hide or show a nearby div tag depending on whether or not "ON" was selected.
$('.togClass').hide();
$('[name*="foo"]').change(function(){
if ($('[value="ON"]').is(':selected')) {
$('.togClass').show('blind', 1000);
} else {
$('.togClass').hide(1000);
}
});
As it is, all of the div tags with class "togClass" toggle when any of the drop down menus choose "ON", is there a way that I can choose to show/hide only the nearby div to the drop-down that chooses "ON"(they are nested in the same div)? I don't want to write a copy of this function for every div I want to hide.
Here is how it works in the HTML:
<select name="foo">
<option value="OFF">OFF</option>
<option value="ON">ON</option>
</select><br/>
<div class="togClass">
//Stuff
</div>

Ofcourse you can. Check out the jquery doc about traversing: http://api.jquery.com/category/traversing/ It has a lot of great examples.
For your problem the solution could be: .closest()
$('div.togClass').hide();
$('select[name*="foo"]').change(function(){
if ($(this).val() == "ON") {
$(this).siblings('div.togClass').show('blind', 1000);
} else {
$(this).siblings('div.togClass').hide(1000);
}
});

You have to tell us a bit more about what "nearby" means. But it appears that the fundamental piece you're missing is the use of $(this) within the change function. Instead of identifying any .togClass item, you want to identify a specific one relative to $(this) -- the element being changed.
Here's one way to do it with the assumption that the associated .togClass div is the next one to be found in the DOM.
$('[name*="foo"]').change(function(){
if( $(this).is(':selected') ) { // relative to the selected item
$(this).next('.togClass').show('blind',1000);
} else {
$(this).next('.togClass').hide(1000);
}
});
Where you see .next() you'll actually need the appropriate jQuery traversal methods -- unlikely to be the one I've randomly assumed in the example.

How about using .closest()?
Should do the trick.

Related

jQuery display none a option in a form

I want to display none a option of a form.
HTML:
<option class="level-0" value="top-10-villen-de">Top-10-Villen</option>
jQuery:
if(jQuery('option').attr('value') == 'top-10-villen-de'){
jQuery(this).css('display', 'none');
}
I've a issue in my if statement but I can't figure out where is my issue.
Can somebody helps me?
Thank you.
Hiding the dropdown option isn't compatible with all browser.
I've got a better option.
wrap the option into span and when you need it back unwrap it
Fiddle link : http://jsfiddle.net/xms2uydx/
You are using wrong this see this example for THIS Scope
http://jsfiddle.net/kevalbhatt18/r2m2ucgv/2/
The above example is give you difference between two this.
1. which is out of Jquery.
2. which is inside jquery function.
so as you can see in example first console i.e console.log(this) will return window object.
2 . $(this) which is inside click function will give you different value it is related to your button it will gives you button scope
you can also use
jQuery('option').find('.level-0').css('display', 'none')
if you know the class of option.
HTML
<button>option 1</button>
<button>option 2</button>
<select>
<option class="level-0" value="top-10-villen-de">Top-10-Villen</option>
<option class="level-1" value="top-1">Top-20</option>
</select>
Jquery
console.log(this)
$('button').click(function () {
if ($(this).text() === "option 1") {
if (jQuery('option').attr('value') == 'top-10-villen-de') {
console.log('inside')
console.log(jQuery('option[class="level-0"]'))
jQuery('option[class="level-0"]').css('display', 'none');
}
} else {
jQuery('option[class="level-0"]').toggle()
}
})
That is because context this in if statement do not refer to option element.Correct way to achieve this would be to find element with attribute value equal to top-10-villen-de along with .hide():
jQuery('option[value="top-10-villen-de"]').hide();
FYI, the hiding of option elements do not work. a good workaround for this would be to disable the option by setting its disabled property to true.
In jQuery , whenever you have more than one element in DOM , then to access all elements you have to use $('selector').each(function(index,Obj){}).
Use this code to hide the options you want
$('#temp').find('option').each(function(index,Obj){
if($(this).attr('value')=='2')
$(this).css('display', 'none');
})
Demo
You can set display none when it the value is top-10-villen-de
jQuery( "select" ).change(function() {
if(jQuery(this).val() == 'top-10-villen-de'){
jQuery(this).find("option[value='top-10-villen-de']").css('display', 'none');
}
});
Here the fiddle
https://jsfiddle.net/jva8ju1s/

jQuery - Select everything but

I want to use jQuery to select everything on a page except a certain div. My question is similar to this answer, but that solution selects only divs, I want to select everything.
In this example Fiddle, I want to select everything that does not have, or not the descendent of an element with, a class of "kids". So clicking on the "grandkids" and "kids" should not show a log entry, but clicking on the "parent" or the image would.
The page will have a very complex structure so something like this wouldn't be feasible.
You can try the not selector
$('body *').not('.kids, .kids *');
or if you are trying to register an event handler then
$(document).on('click', ':not(.kids, .kids *)', function(){
})
use this code, this code exclude .kids element and inner elements of .kids class
$('body').click(function(e) {
if(!$(e.target).closest('.kids').length){
console.log(e.target);
}
});
DEMO
Use e.currentTarget in jquery
$("#parent").not($('.kids')).click(function(e) {
console.log(e.currentTarget);
});

Update CSS onDomReady for nested checkboxes

I have some nested checkboxes that are loading correct data from the database, however I would like to put a line through the text label for the ones that are checked. It's working fine for the second level checkboxes, but I haven't been able to make the first level checkboxes work fine.
You can see the bug here:
http://jsfiddle.net/Zfv7h/3/
$(document).ready(function() {
$(".content-finalized").each(function() {
if ($(this).attr("checked")) {
$(this).closest("li").css("text-decoration", "line-through");
}
});
$(".subchapter-finalized").each(function() {
if ($(this).attr("checked")) {
$(this).closest("li").css("text-decoration", "line-through");
}
});
});
Thanks for your help.
UPDATED ANSWER
Change your Javascript to this
$(document).ready(function () {
$("input.content-finalized:checkbox:checked").next('span').css("text-decoration", "line-through");
$("input.subchapter-finalized:checkbox:checked").parent().css("text-decoration", "line-through");
});
I had to slightly change your html markup. All I did was wrap the Chapter in a .
Here's why. When I applied the css line-though to the parent <li>, it also applied it to it's children even though I specified the text-decoration to none for unchecked elements. So, now instead of applying it to the parent <li>, I'm applying it to the <span> instead.
Here's an updated fiddle

jQuery single event for several DOM objects

I'm trying to make a change event trigger for several objects in the DOM. Let me show you; I have this code
$(document).ready(function() {
$(".select_something").change(function() {
if (!($(".select_something option[value='0']").attr("selected"))) {
$(".write_something").css('display','');
}
else
{
$(".write_something").css('display','none');
}
});
});
And with this I have several selectors/dropdowns all of which is called .select_something. When the option is not the default value (which is 0), it should show a <textarea></textarea> appear, again all of which is called .write_something.
All in all it's a quite simplistic function.
The problem I'm experiencing is that this only affects the very first .select_something, .write_something pair, and the rest is unaffected.
I've tried mixing around with .find(), .parent() and .children() to see if it could stick, but it don't.
How can I make it so all of my .select_something, .write_somethingpairs get changed when triggered?
Edit: The IDs was supposed to be classes, of course.
#select_something
Is an id. IDs must be unique over your entire page. If you have multiple elements with this same id, that's fundamentally wrong (and will cause you massive problems).
Having said that, the fix is easy: change those ids to css classes.
<select id="select_something">
becomes
<select class="select_something">
Then you could select against the css class, but of course you'll have to select the : write_something element relative to the current select. Something like this might work depending on your structure:
$(".select_something").change(function() {
if (!($("option[value='0']", this).attr("selected"))) {
$(this).siblings(".write_something").css('display','');
}
else
{
$(this).siblings(".write_something").css('display','none');
}
});
You should be using a common class for the multiple objects, not a common ID.
The ID attribute is used to IDentify a single item. The CLASS attribute is used to define that an item is part of a group of items, all which have the same class name.
Use the class name selectObject on all of them, and then..
$(document).ready(function() {
$(".selectObject").change(function() {
//inside of an event, $(this) refers to the object that triggers the event,
//in this case, the item that was clicked.
if (!($(this).val()==0)) {
...
}
else
{
...
}
});
});
Here is something for illustration.
http://jsfiddle.net/FxLSR/1/
As mentioned in other answers and comments, only use an ID for unique elements, use a class for multiple elements.
This is how I would setup my code:
HTML:
<div>
<select class="select_something"> ... </select>
<textarea class="write_something"> ...</textarea>
</div>
<div>
<select class="select_something"> ... </select>
<textarea class="write_something"> ...</textarea>
</div>
etc...
Javascript:
$(document).ready(function() {
$(".select_something").change(function() {
if (!($(this).val() == "0") {
$(this).next().show();
}
else
{
$(this).next().hide();
}
});
});
If the elements can't be placed next to each other as in the example HTML code I have given, then just make sure to select the textarea using some sort of relative selector such that you're not selecting all of the text areas. For example, if the two are siblings but they're not next to each other use: $(this).siblings(".write_something")

jQuery click function using same classes

I have a dropdown function that I need to work only on the div clicked, not all (I have 14+ of the same classes on the page that need to be displayed when a certain one is clicked)
At the moment my jQuery is as follows.
$('.qacollapsed').hide();
$('.qa').click(function () {
$('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Of course, that is toggling all qacollapsed classes when there is 14 on the page (Q&A)
Is there a way for it to only drop down the one that is clicked?
the HTML
<div class="qa">
<h4 class="question"> </h4>
</div>
<div class="qacollapsed">
<p> </p>
</div>
It would be helpful to provide a snippet of HTML here, but I'll take a guess at the structure of your markup for now..
Instead of referencing all .qacollapsed elements, you need find elements that are close to the .qa that was clicked, e.g.:
$('.qa').click(function () {
$(this) // start with the clicked element
.find('.qacollapsed') // find child .qacollapsed elements only
.slideToggle();
$(this).toggleClass('active');
});
This will work if .qacollapsed is inside .qa - if not, you might need to use next (for siblings), or one of the other jQuery tree traversal methods.
Yo could find() it or use this as a context in the selector to choose only a descendent of the clicked object
$('.qa').click(function () {
$('.qacollapsed', this).slideToggle();
//You could do $(this).find('.qacollapsed').slideToggle();
$(this).toggleClass('active');
});
Check out the jQuery selectors and why not just use $(this)?
$('.qacollapsed').hide();
$('.qa').click(function () {
$(this).toggleClass('active').next().slideToggle();
});
Personally, I'd give all the divs IDs, the clickable bit being the ID of the question in the database for example, and the answer just being id='ID_answer' or something, then use jquery to slide in the div with the id corresponding to the link clicked, ie
Var showIt = $(this).attr('id') + '_answer'
$('.qacollapsed').not('#'+showIt).hide();
$('#'+showIt).slideToggle;
That will hide all the divs without that ID and show the required one.
Dexter's use of .next above looks simpler though, I've not tried that as being relatively new to jquery too.

Categories

Resources