'toggleClass' not working on every other div [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
For some strange reason this simple click function I've added, which should be adding the 'big' class to the clicked divs, is only working for every other div.
See an example here (click the square boxes with images)
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
});
Here is a fiddle but I chose not to post this as it works fine as it should do. The error is caused by some other element but I don't know what
http://jsfiddle.net/Ly1bxswq/1/

You binding your click handler within a loop, but need to do it only once when all elements added to page.
$.each(data.feed.entry, function (i, entry) {
// ...
$container.append(item);
// ...
})
$('.box').click(function(){
$(this).toggleClass('big').siblings().removeClass('big');
}
As pointed out by #Yan Brunet's comment, it would be much better to delegate the event from every .box to their parent. That way you can bind your handler at any point (even before .box elements are added to page)
$container.on("click", ".box", function(){
$(this).toggleClass('big').siblings().removeClass('big');
});

Related

Js script not update index element html [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I'm stuck with the DOM. When the search button is pressed, JS script will inject element1, and there is a new function (A) that appears after injecting element1.
I changed the class name on element1 to element2. When I want to run function(A) a bug occurs, which function(A) still indexes element1, not element2. How can I fix it?
$('.search').click(function() {
$('button').after('<div class="a b">New div element here!</div>')
// in actual this code will run by click button and this code working
$(this).siblings().last().toggleClass("b")
// this code is not triggered, it should be triggered
$('.a:not(.b)').click(function() {
console.log('clickety click');
})
})
.b {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="search">search</button>
When you bind the events, they stay bound until they are unbound from the element. So if you want to "clean" your event bindings, you can use jQuery unbind() before binding new events:
$('your.selector').unbind().click(...
Another workaround is performing a class check inside the click function callback, to be sure if the element still has (or still hasn't) some class. Just be sure if you need or not to call some kind of preventDefault() to get a better control because button element does have a default behavior.
$('.a').click(function () {
if ( ! $(this).hasClass('b') ){
// Do things with .a elements that don't have .b class
}
})

how to move a "li" tag into another "ul" tag without removing the first "li"? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
how to move a "li" tag into another "UL" tag without removing the first "li"?
$(document).ready(function () {
$("#id").click(function () {
$("#id li").last().replace('#id li');
});
});
also I use this code but didn't work.
You can use jquerys clone() method to "copy" the element
$(document).ready(function () {
$("#id").click(function () {
$("#id li").last().clone().appendTo('.anotherElement')
});
});

on change event not working [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
1) The code(Change Event) that is not working is:
$(document).on('change','select[name="id"]',function(){
alert('Not Working');
});
2) The code(Change Event) that is working is:
$(document).on('change',$('select[name="id"]'),function(){
alert('Working');
// Here $(this).val() not working for get value.I want to use $('select[name="id"]').val()
});
Doubts:
a) Why Is First change event not working?
b) Second change Event is Working, But $(this).val() is not working.
Can you please explain the difference between above 2 functions?
In order to handle select element change:
$('select[name="id"]').on('change',function(){
alert($(this).val());
});
For dynamically created elements use:
$(document).on('change','select[name="id"]',function(e){
alert($(e.target).val());
});
As you see, in that case e.target.val() should be used ( e.target wrapped into $() in order to get it as a jquery object )
I'm not sure why your first example doesn't work as I think it should, however the second example will have this scoped to document instead of the select.
The following will scope this to the select.
$('select[name="id"]').on('change', function (){
$(this).val()
});

Javascript search form on div contents [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So I have a 'form search' function script that I am trying to apply to items within a container. I have found this from a tutorial online that someone used to search members of teaching staff. only I am looking to apply this to my div classes:
$('.form-search').on('submit',function(){return false;});
$('.form-search .btn').on('click', function(e){
var query = $.trim($(this).prevAll('.search-query').val()).toLowerCase();
$('div.dress-container .bold').each(function(){
var $this = $(this);
if($this.text().toLowerCase().indexOf(query) === -1)
$this.closest('div.dress-container').fadeOut();
else $this.closest('div.dress-container').fadeIn();
});
});
Here is the jsfiddle - I was trying to pull the image and text using the JS and class but it would not work:
http://jsfiddle.net/lmac1/x6kv91qk/
Can anyone point me in the right direction? I was using this JQuery hide all divs except for the divs I search for
The problem is that your <div class="dress-container"> is currently wrapping all of your products, therefore you keep on hiding all of them once you use the searchbar.
I fixed your html markup here and removed the <div class="row"> so they line up nicely when you have filtered them:
http://jsfiddle.net/j7c4kdy3/3/

Best way to make toggle effect on column [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have four columns that I want to toggle on hover.
Each column will have default content (visible when the page loads)
and content that will only show when the mouse hovers over the column.
I want the on-hover content to show with a smooth toggle effect (sliding down)
Just to make sure we're on the right track, I don't need to know how to do this.
I know how, what I need to know is the "best" way to do this.
You will have to work with the "onmouseover" and "onmouseout" events.
JavaScript:
document.getElementById('IDOfTheElement').onmouseover = function() {
// Whatever your hover code goes here
document.getElementById('IDOfElementYouWantToShow').style.display = "block";
});
document.getElementById('IDOfTheElement').onmouseout = function() {
// Exit hover code goes here
document.getElementById('IDOfElementYouWantToHide').style.display = "none";
});
jQuery has a nice way of dealing with this:
$('#IDOfTheElement').on('mouseover', function() {
// Whatever your hover code goes here
$('#IDOfElementYouWantToShow').show();
// Or you can
$('#IDOfElementYouWantToShow').fadeIn("slow", function() {
alert('Fading in!');
});
});
$('#IDOfTheElement').on('mouseout', function() {
// Exit hover code goes here
$('#IDOfElementYouWantToHide').hide();
// Or you can
$('#IDOfElementYouWantToShow').fadeOut("slow", function() {
alert('Fading out!');
});
});
Note that some browsers may have issues with show() and hide(), so you may need to use document.getElementById('ID').style.display = 'block'; or document.getElementById('ID').style.display = 'none';.
According to the tag you picked for your question, following is a good solution that olny requires JQuery (no CSS is involved). It's actually pretty easy using the hover() and toggle() functions.
$('tbody.restricted').hide();
$('table').hover(function() {
$(this).find('tbody.restricted').slideToggle("slow");
});
There's a little more complex challenge that is introduced by your will to animate multiple rows as a block. A solution I find suitable for that purpose is to encapsulate (dynamically or not) the rows you want to animate as a whole within a tbody that will be displayed as a block with CSS.
tbody {
display:block;
}
N.B.I went that way because of the usage of a table (columns was mentionned), but you could always design this solution without using tables and only markups displayed as blocks (div by default). This wouldn't require the previous CSS alteration.
See this fully functional JSFiddle
Don't want to just copy some other code, i think this jsfiddle link would solve your problem nicely.
http://jsfiddle.net/NKC2j/2/
$("#menu").hover(function(){
$('.flyout').slideToggle();
});
For performance you would need to toggle a CSS class, otherwise you will need to traverse your DOM a few times to show/hide elements
This is the original post: https://stackoverflow.com/a/11114735/1231079

Categories

Resources