Targetting specific jquery element which have identical class names

Need to add background for the selected div button, Tried in below way but it is adding to all the identical div buttons and also once clikced unbiding the ‘hover’ method is this correct?

<div class="myDiv">
<div class="myBtn"></div>
</div>

<div class="myDiv">
<div class="myBtn"></div>
</div>

<div class="myDiv">
<div class="myBtn"></div>
</div>

$(document).on('click', '.myDiv', function(){
			//some task will goes here	
		$(this).unbind('hover');			
		}).hover(function(){
			$(this).find('.myBtn').css('background','#666666');
		});

Hi,

I’m not sure what your goal is here exactly but the easiest way to change the colour of the clicked element is to add a class and then control the styling through css (as that is csss’s job).

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.active .myBtn{background:#666}
</style>
</head>

<body>
<div class="myDiv">
  <div class="myBtn">a</div>
</div>
<div class="myDiv">
  <div class="myBtn">b</div>
</div>
<div class="myDiv">
  <div class="myBtn">c</div>
</div>
<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script> 
<script>
$(document).on('click', '.myDiv', function(){
			//some task will goes here	
	$(this).addClass('active');			
})
</script>
</body>
</html>

Of course I’m guessing that you have more complex requirements than the above :slight_smile:

If you only want one button highlighted at a time then just remove the active class from all first.

e.g.

$(document).on('click', '.myDiv', function(){
	//some task will goes here	
	$('.myDiv').removeClass('active');	
	$(this).addClass('active');			
})

Thanks for your reply, on hover need to add another class, please see my question once again.

Please see my answer :slight_smile:

Perhaps if you can explain fully what you are doing here it may help towards a proper solution rather than throwing snippets backwards and forwards.

Why are you adding a class on hover and what element are you adding it to?

At present you are changing the background of all the myBtns when you hover over the body.

Are you removing the background when not hovered?

Why not use CSS for the hover effect?

If you can clarify your intentions we can works towards a solution :slight_smile:

Here’s an example that may help with your problem.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.notClicked .myDiv:hover {
	background:#666
}
.myBtn {
	display:inline-block;
	padding:5px 10px;
	background:red;
	opacity:0.5;
	min-width:100px;
	margin:10px 0;
}
.notClicked .myDiv:hover .myBtn,
.active .myBtn{opacity:1.0}
</style>
</head>

<body>
<div class="wrap notClicked">
  <div class="myDiv">
    <div class="myBtn">a</div>
  </div>
  <div class="myDiv">
    <div class="myBtn">b</div>
  </div>
  <div class="myDiv">
    <div class="myBtn">c</div>
  </div>
</div>
<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script> 
<script>

$('body').on('click','.myDiv',  function (event) {
    $('.wrap').removeClass('notClicked');
	$('.myDiv').removeClass('active');
	$(this).addClass('active');
});

</script>
</body>
</html>
1 Like

@PaulOB: Thanks for the code at last fixed the issue based on your workaround…:slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.