CODEWITHSUNDEEP
jquery
Albert
Albert

Reputation: 507

jQuery script: if one <div> clicked, apply action to two of them

I need some help to find the solution for my problem.

I have two multiple <div> tags. Let's say these are '.apple' and '.orange'. I have, let's say 3 apple and 3 orange. All the apples and oranges are numbered by their classes.

When I click specific '.apple', my jQuery script adds 'selected' word to its class.

$('.apple1, .apple2, .apple3').on('click', function () {
    $(this).toggleClass('selected').siblings('.apple1, .apple2, .apple3').removeClass('selected');

HTML-code looks like this:

<div class="apple1 selected"></div> <!--If .apple1 was selected-->
<div class="apple2"></div>
<div class="apple3"></div>

<div class="orange1 selected"></div> <!--If .apple1 was selected-->
<div class="orange2"></div>
<div class="orange3"></div>

What I want to do now is to find the way to add 'selected' to specific '.orange' class, depending which '.apple' was clicked. Like this:

.apple1 clicked => .apple1 class 'selected' AND .orange1 class 'selected'
.apple2 clicked => .apple2 class 'selected' AND .orange2 class 'selected'
.apple3 clicked => .apple3 class 'selected' AND .orange3 class 'selected'

I think I need an IF statement to do the job here, but I'm very new to jQuery and I can't figure out how to write the statement to grab which .apple (number 1, 2 or 3) was clicked and modify class of the same number orange.

Thanks in advance :)

Upvotes: 0

Views: 50

Answers (3)

Anders Anderson
Anders Anderson

Reputation: 433

You could possibly try the following.

$('.apple1, .apple2, .apple3').on('click', function(event) {
  $('.orange' + event.target.id).addClass("active");
  $('.'+event.target.className).addClass("active");
})
.apple1,
.apple2,
.apple3 {
  background-color: Red;
}
.orange1,
.orange2,
.orange3 {
  background-color: Orange;
}
.active {
  background-color: Blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="apple1" id='1'>asd</div>
<div class="apple2" id='2'>asd</div>
<div class="apple3" id='3'>asd</div>


<br>
<br>
<br>

<div class="orange1">asd</div>
<div class="orange2">asd</div>
<div class="orange3">asd</div>

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

First find the clicked element's class and grab the number contained. Then apply the 'selected' class both to the click and the respective '.orange' element:

$(document).on('click', '[class^=apple]', function() {  
    $('div').removeClass('selected');  
    var i = $(this).attr('class').replace('apple', '');
    $(this).addClass('selected');
    $('[class="orange' + i + '"]').addClass('selected');      
});
.selected { color:red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="apple1">apple1</div> <!--If .apple1 was selected-->
<div class="apple2">apple2</div>
<div class="apple3">apple3</div>

<div class="orange1">orange1</div> <!--If .apple1 was selected-->
<div class="orange2">orange2</div>
<div class="orange3">orange3</div>

Upvotes: 1

tymeJV
tymeJV

Reputation: 104775

You can refactor your HTML to use custom data-* attributes, and then use generic classes like apple and orange :

<div class="apple" data-number="1"></div>
<div class="apple" data-number="2"></div>
<div class="apple" data-number="3"></div>

<div class="orange" data-number="1"></div>
<div class="orange" data-number="2"></div>
<div class="orange" data-number="3"></div>

And the jQuery:

$(".apple, .orange").click(function() {
    var clickedClass = $(this).attr("class");
    var siblingClass = clickedClass == "orange" ? "apple" : "orange";
    var siblingNum = $(this).data("number");

    $(".orange, .apple").removeClass("active");
    $(this).toggleClass("active");
    $("." + siblingClass + "[data-number=" + siblingNum + "]").addClass("active");
});

Demo: http://jsfiddle.net/nrgft4L0/

Upvotes: 1

Related Questions