We Keep Coding

How to use each() with mouseenter, mouseover and data attributes right

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>

Mouseout and click

When a user mouses over a div it should change to the color red, when they mouse out it should change back to transparent. When they click on the div, it should change to color red.
For some reason, the mouse out event listener is conflicting with the click event listener. Can someone help? When I click on the div, it doesn't change to red.
div$.on('mouseover', function () {
$(this).css('background-color', 'red');
});
div$.on('mouseout', function () {
$(this).css('background-color', 'white');
});
div$.on('click', function () {
$(this).css('background-color', 'red');
});
Note, I have to apply a background image dynamically to each element, so using CSS classes to add the background image is out of the question (because I don't know it before hand).

You could set a boolean variable to confirm that the click has occurred and then only run the mouseout code if the variable is false like this:
var is_clicked = false;
div$.on('mouseover', function () {
$(this).css('background-color', 'red');
});
div$.on('mouseout', function () {
if(!is_clicked) {
$(this).css('background-color', 'white');
}
});
div$.on('click', function () {
$(this).css('background-color', 'red');
is_clicked = true;
});
Note: For multiple div elements user multiple is_clicked variables

You can always do a CSS implementation with :hover; just make sure to add a specifying class to each element you would like this effect on.
1. :hover and jQuery
var div$ = $('.redHover'); // name the class whatever you like
div$.on('click', function () {
$(this).css('background-color', 'red');
});
div {
display: inline-block;
}
.redHover {
height: 100px;
width: 100px;
border: 1px solid black;
}
.redHover:hover {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='redHover'></div>
<div class='redHover'></div>
<div class='redHover'></div>
2. :hover and vanilla JS
var els = document.querySelectorAll('.redHover');
for (var i = 0; i < els.length; ++i) {
els[i].addEventListener('click', function() {
this.style.backgroundColor = 'red';
});
}
div {
display: inline-block;
}
.redHover {
height: 100px;
width: 100px;
border: 1px solid black;
}
.redHover:hover {
background: red;
}
<div class='redHover'></div>
<div class='redHover'></div>
<div class='redHover'></div>

Instead use mouseenter insead of mouseover see why.

The best thing you can go with would be the following notes:
To those elements with hover effect add a class like hoverable.
Hover effect is only applied to those elements having this class.
HTML:
<div class="hoverable"></div>
CSS:
.hoverable:hover{
background-color: red
}
JavaScript:
div$.on('click', function () {
$(this).css('background-color', 'red');
});
In this way, you can simply decide whether an element should be hover-able or not by adding or removing hoverable class. Also hover effect is applied in CSS level not JavaScript, which is more acceptable.

As far as I understand you really want to change picture in the div, not just background color which is relatively easy. Try this:
<div class="hoverable">
<img src="myImg.jpg" />
</div>
//css
.hoverable img{visibility:hidden;}
.hoverable:hover img{visibility:visible;}
.clicked img{visibility:visible!important;}
//JS
$('.hoverable').click(function(){
$(this).addClass('clicked');
});

click to change background toggle

When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks

JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/

Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE

You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>

Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/

Javascript change colour of divs, and then colour of the div's focus

I am making a html forum and am using javascript to change the colour of the forum, I have three divs, one is blue, green and red.
When each div is clicked, the javascript will change the colour of the elements.
I would like to change the colour of the submit button's focus with the .css() function in javascript, but the focus part doesn't work.
Here is my javascript code:
$("#green").click(function() {
$(".mailheader").css("background","#a3d300");
$(".submit").css("background","#a3d300");
$(".submit:focus").css("background","#98cf00");
});
$("#blue").click(function() {
$(".mailheader").css("background","#00b4ff");
$(".submit").css("background","#00b4ff");
$(".submit:focus").css("background","#04a6e9");
});
$("#red").click(function() {
$(".mailheader").css("background","#ff0000");
$(".submit").css("background","#ff0000");
$(".submit:focus").css("background","#ea0202");
});
So I have tried $(".submit:focus").css("background","#ea0202"); for chaning the background of the focus, but it doesn't work. anyone know how to fix this? thanks

Check this
DEMO
HTML
<div class="mailheader"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
<input type="button" value="submit" class="submit" />
CSS
#green, #red, #blue {
height:50px;
width:100px;
}
#green {
background-color:green;
}
#red {
background-color:red;
}
#blue {
background-color:blue;
}
jQuery
$("#green").click(function () {
$(".mailheader").css("background", "#a3d300");
$(".submit").css("background", "#a3d300");
$(".submit").focus(function () {
$(".submit").css("background", "#04a6e9");
})
});
$("#blue").click(function () {
$(".mailheader").css("background", "#00b4ff");
$(".submit").css("background", "#00b4ff");
$(".submit").focus(function () {
$(".submit").css("background", "#ea0202");
})
});
$("#red").click(function () {
$(".mailheader").css("background", "#ff0000");
$(".submit").css("background", "#ff0000");
$(".submit").focus(function () {
$(".submit").css("background", "#98cf00");
})
});

You are setting styles directly on the element. Why not set a css class on the elements and handle all the changes via css. That is much cleaner and easier to use.
eg. when '#green' is clicked add a class 'Green' to the submit button. (see http://api.jquery.com/addClass/ ) (be sure to remove the other classes)
Then in css you can set #MySubmitButton.Green{.. your green styles..} and use all the pseudo css classes you like. Things like #MySubmitButton.Green:hover {color:#FF00FF;}
Hope this helps...

jQuery can't change pseudo-elements' style
Fix (I used the .html() function for the :focus's style, using a <style> tag in the body or elsewhere):
<script>
...
$(".submit").css("background","#ff0000");
$("body style.changeColor").html("
.submit:focus {background: #ea0202};
");
...
</script>
<body>
<style class="changeColor">
</style>
</body>
And I were you, I rather change all other .css() functions into text inside the .html() string.
$("body style.changeColor").html("
...
.submit {background: #ff0000};
.submit:focus {background: #ea0202};
");

turning on and off border radius on jquery click event

There are few divs. I need to change the border radius of them with click event. i have managed to change the border radius only once. When someone click on a div, the border radous should be changed to 50%, And click on the same div again, applied border radius should remove.
And while there is a border changed div and if click on another div border of the changed div should remove and border radius should applied to clicked div. Which means there must be only one border radius applied div at a time.
I have this code
jsfiddle
HTML
<div></div>
<div></div>
<div></div>
<div></div>
ANd this css
div {
width: 100px;
height: 100px;
background: #000;
margin: 10px;
float: left;
}
also this jquery code
$('div').each(function(){
$(this).click(function(){
$(this).css('border-radius', '50%');
});
});
help me please, on this.. i have no idea about how to do this..

Use a class for that:
DEMO
$('div').click(function(){
if($(this).is('.radius')){$(this).removeClass('radius'); return;}
$(this).addClass('radius').siblings().removeClass('radius');
});
div.radius {
    border-radius:50%
}

You may want to provide more divs than this. So you should user a class to select them.
I've updated your code and give you this function:
$('div.radius').each(function(){
$(this).click(function(){
$('div.radius').css('border-radius','0');
$(this).css('border-radius', '50%');
});
});
http://jsfiddle.net/C23a2/1/

I have updated your code adding CSS classes: http://jsfiddle.net/Hq6TQ/7/
div.round-border {
border-radius: 50%;
}
and adding it using jQuery:
$(this).addClass("round-border");
P.S. you don't need to iterate over each div element and bind events, you can just use the following snippet:
$('div').click(function(){
// do whatever you need here
});
UPDATE: so far here is what you've initially asked for, I didn't read your question well.

$('div').toggle(function(){
$(this).css('border-radius', '50%');
});

First, you don't need to do each for a click event. Just use click directly. Then:
$('div').click(function(){
$(this).css('border-radius', $(this).css('border-radius') == '50%' ? '0px' : '50%');
});
A (better) alternative would be to use toggleClass() like some people here suggested.

JQUERY:
$('div').click(function () {
$('div').removeClass('radius')
$(this).addClass('radius');
});
CSS:
div.radius {
border-radius:50%
}
DEMO

Try this, working good.
$('div').each(function () {
$(this).click(function () {
if ($(this).css("border-radius") == "0px") {
$(this).css('border-radius', '50%');
} else {
$(this).css('border-radius', '0');
}
});
});
JSFIDDLE