I have an application creating a bunch of divs through a loop.
Each div has the class "product"
so it looks like
<div class="product">
!.....stuff here ....!
<div class="show_on_hover">...buttons here... </div>
</div>
so there are about 12 of these same divs per page.
I would like to hover over a specific one and show the specific "show_on_hover" div which is initially set to display:none.
$('.product').hover(function() {
$(.show_on_hover).show();
},
function () {
$(.show_on_hover).hide();
}
);
That is what I have so far but it will show ALL of the .show_on_hovers on the page so I am wondering how to get only the specific one you have moused over to show. This effect is seen on youtube when you mouseover any of the comments, and some comment tools pop up.
Thanks!
find will find your .show_on_hover divs inside the hovered .product. Try this:
$('.product').hover(function() {
$(this).find('.show_on_hover').show();
},
function () {
$(this).find('.show_on_hover').hide();
}
);
Try
$('.show_on_hover', this).show()/.hide()
Adding the second param to the jQuery function will constrain the search to be inside that element. In this case this will be the div that is clicked on.
Related
I'm trying to make the hyperlinks on my website have a certain css animation effect.
My code:
$("a").mouseenter(function() {
this.addClass("myeffect");
}
It works fine so far, but when I hover a link, every link on the website start showing the effect, not only the one I've mouse-hovered.
How can I have only the link which is being hovered show the effect?
You are referencing this incorrectly.
$("a").mouseenter(function() {
$(this).addClass("myeffect");
}
Simple this return you the current element/node. And there is no addClass method available to it.
You need to select that element from the node and add class to it.
$(this) will select that particular element
$("a").mouseenter(function() {
$(this).addClass("myeffect");
})
.myeffect{
color : red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
1
2
3
4
5
I have a script where clicking on a particular div (eg id=packtoa) will (amongst other things) .addclass('show') to listview items with a class which matches the id of the div clicked.
Which works great, but then I'll want the next div (id=packfhag) to do the same thing, and then the next one. So I've got the same script many times in my js with just the id & class name changed.
I'm sure there's a stupidly obvious way to automate this so that any div with an id starting with "pack" will trigger this script, pull the div id, and insert it into the script where the name of the class is called.
And I'm sure I'm close with trying to adapt this script:
$("div[id^=pack]").each(function() {
var match = this.id.match(/\w+$/)[0];
$(this).addClass('show');
});
But I just can't crack it. Either something above is wrong, or I'm inserting it into the wrong place in the script:
// Tears of Ameratsu menu functions
$(document).bind('pageinit', function() {
// When link is clicked
$('#packtoa').click(function() {
// collapse the expansions menu
$("#expansionsmenu").click();
// hide everything except this expansion
$(".hidden").removeClass('show');
$(".packtoa").addClass('show');
// clear the search, and trigger a blank search
$('input[data-type="search"]').val('');
$('input[data-type="search"]').trigger("keyup");
});
});
What am I missing?
// for selecting div which starts with pack
// not recommended
$("div[id^='pack']");
The best option is to use class attribute, add class attribute to all those div, and then
$('.commonClass').addClass('show');
For Example :
// this is for testing
// say you click
$('#test').on('click',function(){
$('.testclass').addClass('show');
});
.testclass{
display:none;
}
.show {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="testclass">div1</div>
<div class="testclass">div2</div>
<div class="testclass">div3</div>
<input type='button' value='Click me to view div' id='test' />
Im trying to figure out how to hide my divs on click, I have two foreaches so it will be multiple equal divs created meaning same class names and stuff so I figured using .closest to hide/show the one I click. If the foreach creates 4 divs and I click one of them I want that one to hide/show.
Also, see comments in following code
#foreach ())
{
<div class="vwHoldLiftInfo"> // Bigger div
<a class="liftVariTitle">#variants</a><br /> // Click THIS..
<div class="vwSetRepHolder #cssClass"> // To hide THIS..
#foreach ())
{
<a>#d.sett x #d.rep #d.kg</a><br />
}
</div>
</div>
}
This is the script I tried with but it hides all the divs! Can this be done?
$(function() {
$(".liftVariTitle").click(function() {
$(".vwHoldLiftInfo").children('div').hide(); // .closest/.children?
});
});
(I only want to hide the div thats closest to the a tag) you need to use $(this)
$(function() {
$(".liftVariTitle").click(function() {
$(this).closest(".vwHoldLiftInfo").find('.vwRepSetHolder').hide(); // .closest/.children?
});
});
I'm trying to scroll multiple div at the same time. when i scroll in one div, i would like to report the scroll in all div.
I create the div dynamically. So i use the function document.getElementsByClassName sub-category-container to get all my elements. And i try to get the current scroll of the current div to defer the value.
I can not get it to work through the class names.
Do you have a solution?
Here is an example of what I try to do :
JSFiddle
As you are using jQuery already Use class selector. Try this:
var subCatContainer = $(".sub-category-container");
subCatContainer.scroll(function() {
subCatContainer.scrollLeft($(this).scrollLeft());
});
DEMO
Based on your JSFiddle,
$(".sub-category-container").scroll(function() {
for(var i in subCatContainer)
$(subCatContainer[i]).scrollLeft($(this).scrollLeft());
});
JSFiddle
I've written jquery for a toggle button...
$(document).ready(function(){
/* Needs to be re-written for multiple questions */
$(".full_question").hide();
$('.question a').after('<a class="show_full_question" href="#">more</a>');
$('.show_full_question').click(function() {
var el = this;
$(".full_question").toggle(function() {
$(el).text($(el).text() == 'less' ? 'more' : 'less');
$(el).toggleClass("hide_full_question");
});
});
});
it toggles between the full question width and partial width. But when clicked it toggles for all questions on the page. How would I get it toggle only one?
I know it has something to do with $(this) but not sure where it goes... I don't mind changing the html if necessary.
The html is...
<h3 class="question">
<a href="#">What size is the circumference of the earth? I don't really know what it is! Help me! What size is the...
<span class="full_question"> circumference of the earth? I really don't know!</span>
</a>
</h3>
The problem is $(".full_question").toggle(), will toggle all elements with the full_question class. You need to somehow link the current element being clicked with the proper full_question.
Since you have one full_question and one show_full_question button under the same parent you can use jQuery to get the parent and find the question to toggle:
$(this).parent().find(".full_question").toggle()
If you are certain that HTML structure won't change you can also do:
$(this.previousSibling.childNodes[1]).toggle()
Here's a jsfiddle example.