I have a block which has some data attributes:
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
Now I want to use javascript for changing text color on mouseenter and mouseover using my data attributes.
So I have:
$(".my-div").each(function() {
$(this).mouseenter(function() {
$(this).css('color', this.dataset.hover);
});
$(this).mouseleave(function() {
$(this).css('color', this.dataset.color);
});
});
If I have one div, it's working fine, but if I have another divs with the same class, and I mouseenter and mouseover one div, another divs react too.
What should I do to make it working right, maybe add an index, I don't know.
Can you help me, please?
Thanks in advance. Sorry for my English.
P.S. Don't advise css, for this I must use javascript.
Your code should work by itself but you don't need to loop through each div to check if the mouse has entered or left each div element - it's extremely inefficient.
So remove:
$(".my-div").each(function() {});
Your new code should look like the following:
$(".my-div").mouseenter(function() {
$(this).css('color', this.dataset.hover);
});
$(".my-div").mouseleave(function() {
$(this).css('color', this.dataset.color);
});
.my-div {
position: relative;
display: inline-block;
width: 100px;
height: 100px;
color: #ff4b4b;
border: 1px solid #000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
<div class="my-div" data-color="#ff4b4b" data-hover="#000">
Text
</div>
Obviously the CSS isn't necessary but I have added it to prove that it works correctly.
Get the target element of the event passed into each handler using $(this):
$(".my-div").each(function() {
$(this).mouseenter(function(e) {
$(this).css('color', this.dataset.hover);
});
$(this).mouseleave(function(e) {
$(this).css('color', this.dataset.color);
});
});
.my-div{
font-size: 20px;
line-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="my-div" data-color="black" data-hover="red">
Text 1
</div>
<div class="my-div" data-color="black" data-hover="green">
Text 2
</div>
<div class="my-div" data-color="black" data-hover="blue">
Text 3
</div>
Related
Thanks for taking a look at my question.
I'm trying to be able to hover over portfolio items but I need to loop through them using each() because I need some way of identifying each item.
I'm trying to hover over .recent-work-item to show .recent-work-item__overlay the .show-none class does display:none;
Neither the hover nor the on.("mouseenter", function(){}) is working.
Here is the HMTL:
<section class="recent-work-item" data-portfolio-id="rwi-<?php echo $i;?>">
<div class="recent-work-item__overlay show-none">
<h3 class="color-white bolder-font"><?php the_title(); ?></h3>
VIEW CASE
</div>
<div class="recent-work-img">
<img src="<?php echo get_template_directory_uri();?>/assets/img/work1.jpg" class="portrait">
</div>
Here is the jQuery:
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
console.log(thisid);
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(thisid).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(thisid).find('.recent-work-item__overlay').addClass('show-none');
});
});
This is not working, I can't get the hover to work and all I want to do is add or remove a class, can I not do this in each().
I've researched thoroughly in StackOverflow but can't find an answer. I would REALLY appreciate any help I can get on this.
I have test your code in my codepen, and the problem you should use $(this) than use $(thisid)
$.each($('.recent-work-item'), function(){
var thisid = $(this).attr("data-portfolio-id");
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseenter', function(){
$(this).find('.recent-work-item__overlay').removeClass('show-none');
});
$("[data-portfolio-id="+"'"+thisid+"']").on('mouseleave',function(){
$(this).find('.recent-work-item__overlay').addClass('show-none');
});
});
Here look at my codepen
Here I have added an example that shows how you could use CSS to show/hide elements. It might not give you exact answer to your problem, but it will help you change your stylesheets as per your requirement.
Essentially, as per the discussion in comments, I don't think you need javascript to design the page the way you need it.
.container {
padding: 10px;
border: 1px solid gray;
}
.container > .hideOnHover {
display: block;
}
.container > .showOnHover {
display: none;
}
.container:hover > .hideOnHover {
display: none;
}
.container:hover > .showOnHover {
display: block;
}
<div class="container">
<div class="hideOnHover">
This text will be hidden on hover.
</div>
<div class="showOnHover">
This text will be shown on hover.
</div>
</div>
I need to be able to change the color of the my headings and the picture when the user hovers over the parent div. It works individually meaning when I hover over id="cf" the picture changes, but not the title and visa versa but not at the same time. Any help would be appreciated.
$(document).ready(function(){
$("#cf img").hover(function(){
$(this).css("-webkit-filter", "grayscale(0)");
}, function(){
$(this).css("-webkit-filter", "grayscale(1)");
});
$(".blue-bar-info").hover(function(){
$(this).css("background", "pink");
}, function(){
$(this).css("background", "blue");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf">
Picture
<div id="blue-bar" class="blue-bar-info">
<div class="inner">
<h4>Title</h4>
<span>Sub Title</span>
</div>
</div>
</div>
To achieve this I'd suggest you instead use CSS. It was designed for the purpose of changing the UI, performs much better than JS and avoids the possible FOUC when the page loads.
To do this, you can set the default styles, then override them in the :hover pseudo-selector, like this:
#cf img {
-webkit-filter: grayscale(1);
width: 150px;
height: 150px;
}
#cf:hover img { -webkit-filter: grayscale(0); }
#cf .blue-bar-info { background-color: pink; }
#cf:hover .blue-bar-info { background-color: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cf">
<img src="https://i.imgur.com/KwkmSK4.jpg"/>
<div id="blue-bar" class="blue-bar-info">
<div class="inner">
<h4>Title</h4>
<span>Sub Title</span>
</div>
</div>
</div>
JS solution, but recommend is use CSS for this ;)
$("#cf").hover(function(){
$("#cf img").css("-webkit-filter", "grayscale(0)");
$(".blue-bar-info").css("background", "pink");
}, function(){
$("#cf img").css("-webkit-filter", "grayscale(1)");
$(".blue-bar-info").css("background", "blue");
});
Something like this?
$(document).ready(function () {
$("#cf img, .blue-bar-info").hover(function () {
$('#cf img').css("-webkit-filter", "grayscale(0)");
$('.blue-bar-info').css("background", "pink");
}, function () {
$('#cf img').css("-webkit-filter", "grayscale(1)");
$('.blue-bar-info').css("background", "blue");
});
});
I believe your code is fine except you are using wrong selector for parent div in your code.
Can $("#cf") instead of $("#cf img") solve your problem?
For example :
<div id="parent">
<div id="child">Click here</div>
</div>
when i click on child, both div will disappear or hidden
You can do by using jquery on() and hide() function. Once you html properly render or loaded then following code will be ready to execute, this is beacuse of $(document).ready(function() {...Execute Once HTML Render...});
So the following code will be functional only click event as you see i am using on('click',function(){...});
$(document).ready(function() {
$( "#child" ).on('click',function(){
$(this).parent().hide();
});
});
Here is an example
Try this using jQuery
$("#child").on('click',function(){
$(this).parent().hide();
});
Link for reference
hope this helps...
Here you go with an working example https://jsfiddle.net/fdaqsks2/
$("#child").click(function(){
$(this).parent().hide();
})
#parent{
padding: 20px;
background: red;
}
#child {
padding:5px;
background: blue;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child">Click here</div>
</div>
I am working on a web-site project now. I have 3 div's. if you click on any 1 of those it will take 80% space in width, the thing works but for some reason 1 of them isn't working until i change oneclose to oneopen in 3d script row, which is not right as far as i see, it does not make any sense.
The scheme it is working is next: i have different markup for *open and *close ids, when i click on one of div it changes as you can see below. does anyone knows what's going on here?
<script>
$('#twoclose').click(function() {
$('#twoclose').prop('id', 'twoopen');
$('#oneopen').prop('id', 'oneclose');
$('#threeopen').prop('id', 'threeclose');
});
</script>
<script>
$('#threeс').click(function() {
$('#threeс').prop('id', 'threeopen');
$('#oneopen').prop('id', 'oneclose');
$('#twoopen').prop('id', 'twoclose');
});
</script>
<script>
$('#oneclose').click(function() {
$('#oneclose').prop('id', 'oneopen');
$('#threeopen').prop('id', 'threeclose');
$('#twoopen').prop('id', 'twoclose');
});
</script>
When you bind an event, it is bound to that element. When you change the id, the events do not automatically change. Use classes to change the styles, not ids.
Simplify your code so you do not have to hardcode ids.
$(".box").on("click", function () {
$(".box.active").removeClass("active");
$(this).addClass("active");
});
.box {display: inline-block; width: 100px; height:100px; border: 1px solid black;}
.box.active { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
I want to dynamically change the class of the element #sidePanel from .compact to .expanded, in this code:
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer">
<div id="button"></div>
</div>
</div>
I'm stuck here, I can't apply the class to the correct <div>, I can just add the class to the topbar:
$(document).ready(function(){
$("#button").mouseover(function(){
$("this").parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});
I also tried this:
$(document).ready(function(){
$("#button").mouseover(function(){
$("#sidepanel").addClass(".expanded").removeClass(".compact");
});
});
Your second example was pretty close. When you $.addClass() and $.removeClass(), or are referring to classnames outside of using a selector to target something, just reference the class name (no need for the leading .). Also JS (and CSS) are case-sensitive, so $('#sidepanel') won't target #sidePanel - the cases need to match.
$("#button").mouseover(function() {
$("#sidePanel").addClass("expanded").removeClass("compact");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
In your first example, $(this) is how you reference this in jQuery. If you put this in quotes, the word this is treated as a string literal instead. And since to use $.parent() you would need to go up 2 levels, you should use $.parents() with the ID of the parent you want to target, then use $.prev() to select the previous element, which is #sidePanel. So to traverse the DOM like that, this is how I would do it.
$("#button").mouseover(function() {
$(this).parents('#topbar').prev().removeClass('compact').addClass('expanded');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
Your problem is you used $("#sidepanel") instead of $("#sidePanel")
Here's a working example after the change is made:
$(document).ready(function(){
$("#button").on('mouseover', function(){
$("#sidePanel").addClass("expanded").removeClass("compact");
});
});
#topbar > div {
width: 100px;
height: 30px;
background: #ccc;
margin-top: 20px;
}
#sidePanel {
width: 100%;
height: 40px;
background: #ccc;
}
#sidePanel.expanded {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer"></div>
<div id="button"></div>
</div>
first: the solution
$(document).ready(function()
{
$("#button").mouseover(function()
{
// class names - without the dot
$("#sidepanel").addClass("expanded").removeClass("compact");
});
});
then: why you were really close on your first attempt
$(document).ready(function()
{
$("#button").mouseover(function()
{
// $(this) selector uses the `this` keyword (not as a string)
$(this).parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});