Connecting various components together

Question

Connecting various components together

I am attempting to establish a connection between various elements in order for a specific class element to trigger an action on another specific class element (for example, when .ph5 is clicked, .art5 should become visible)

Here is what I have developed so far:

var back = [$(".art1"), $(".art2"), $(".art3"), $(".art4"), $(".art5"), $(".art6"), $(".art7"), $(".art8"), $(".art9")];
var front = [$(".ph1"), $(".ph2"), $(".ph3"), $(".ph4"), $(".ph5"), $(".ph6"), $(".ph7"), $(".ph8"), $(".ph9")];

$('front').click(function(e) {
  var clicked = $(e.clicked);
  for (var i = 0; back.length; i++) {
    if (clicked.is(front[i])) {
      back[i].show();
    }
  }
});

Unfortunately, this implementation does not seem to be functioning as expected. Could there be an error in my code, or is there a more effective method of "linking" multiple classes together?

jquery html css

Answer 1

Answer №1

If you assign them all the same common class, the process becomes even easier. By using the index() method, you can determine the index of an element within a collection, and then utilize the eq() method to target another set of elements (assuming that both sets are in the same order).

var $front = $('.ph'); // all elements share the same class
$front.click(function(){
   var index = $front.index(this); // index of the clicked element within the collection
   $('.art').hide().eq(index).show();  // hide all elements, then show the element at the matching index  
});

References:

index() API Documentation

eq() API Documentation

DEMO

Answer 2

If you assign them all the same common class, the process becomes even easier. By using the index() method, you can determine the index of an element within a collection, and then utilize the eq() method to target another set of elements (assuming that both sets are in the same order).

var $front = $('.ph'); // all elements share the same class
$front.click(function(){
   var index = $front.index(this); // index of the clicked element within the collection
   $('.art').hide().eq(index).show();  // hide all elements, then show the element at the matching index  
});

References:

index() API Documentation

eq() API Documentation

DEMO

Answer 3

Answer №2

There is a more simplified approach using a jQuery selector element[attr^='value'], which can target all elements with an attr that starts with value.

$("div[class^='ph']").click(function() {
  var newid = $(this).attr("class").replace("ph", "art");
  $("." + newid).show();
});

.art1,
.art2,
.art3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="ph1">ph1</div>
<div class="ph1">ph1</div>
<div class="ph2">ph2</div>
<div class="ph2">ph2</div>
<div class="ph3">ph3</div>
<div class="ph3">ph3</div>
<br>
<div class="art1">art1</div>
<div class="art1">art1</div>
<div class="art2">art2</div>
<div class="art2">art2</div>
<div class="art3">art3</div>
<div class="art3">art3</div>

Answer 4

There is a more simplified approach using a jQuery selector element[attr^='value'], which can target all elements with an attr that starts with value.

$("div[class^='ph']").click(function() {
  var newid = $(this).attr("class").replace("ph", "art");
  $("." + newid).show();
});

.art1,
.art2,
.art3 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="ph1">ph1</div>
<div class="ph1">ph1</div>
<div class="ph2">ph2</div>
<div class="ph2">ph2</div>
<div class="ph3">ph3</div>
<div class="ph3">ph3</div>
<br>
<div class="art1">art1</div>
<div class="art1">art1</div>
<div class="art2">art2</div>
<div class="art2">art2</div>
<div class="art3">art3</div>
<div class="art3">art3</div>

Answer 5

Answer №3

To access array elements, avoid using front[i] and back[i]. Instead, create an array object and access elements using the .eq() selector:

$(front).click(function(e) {
  var clicked = $(e.clicked);
  for (var i = 0; back.length; i++) {
    if (clicked.is($(front).eq(i))) {
    $(back).eq(i).show();
  }
 }
});

Answer 6

To access array elements, avoid using front[i] and back[i]. Instead, create an array object and access elements using the .eq() selector:

$(front).click(function(e) {
  var clicked = $(e.clicked);
  for (var i = 0; back.length; i++) {
    if (clicked.is($(front).eq(i))) {
    $(back).eq(i).show();
  }
 }
});

Connecting various components together

Answer №1

Answer №2

Answer №3

Similar questions

Conceal rows in a table that are not selected using Jquery when the table has been loaded from a given URL

Is Amazon altering the names of their CSS selectors and HTML elements on the fly?

Whenever I try to open my jQuery UI Dialog without first displaying an alert, it does not work

What are some effective strategies for keeping content from shrinking in a drawer menu?

Ways to verify if the user has inputted a typeahed value

Disable the default page scrolling behavior when collapsing an accordion section in Bootstrap 4 framework

Guide to center align fields in Ionic and Angular

Tips for keeping an image stationary when hovering over it

Generating safe HTML output in PHP requires adding 4 spaces before the code

Achieve the effect of making the Bootstrap JS Collapse text bold after it has been

I'm having issues with my flipclock moving too quickly and skipping over certain numbers. Any suggestions on how to resolve this issue?

Implement a procedure for printing a page once the columnize operation has been completed

Enhance text content effortlessly with an automated text augmentation feature

Preserving data and retrieving it

What is the best way to make a block fill 100% of a container-fluid?

Strategies for Implementing Multi-Step Password Form Validation

Unable to align a 1px element with the primary border

How can I maintain my bottom navigation bar in Bootstrap 3 without using a 3 span icon?

What is the solution to resolving an Open Quote error message in HTML coding?

Getting rid of the hover box feature in a WordPress theme