What is the best way to determine the location of just one element?

Question

What is the best way to determine the location of just one element?

I am currently working on a rating application where only the selected circle should remain green, not all of them.

$('#rating-container').click(function () {
    var element = $('#target');
    var container = $('#rating-container');
    var index = container.children().get(element);
    var foundElement = container.children().get(index);
    var jQueryObject = $(foundElement);
    jQueryObject.addClass('rating-chosen');
});

This is the HTML structure:

<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div id="target" class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

You can view the Codepen demo at the following link:

https://codepen.io/CasaDeOrellana/pen/JqqJxZ

javascript jquery html css

Answer 1

Answer №1

To change the class of an element, you can utilize the .removeClass() combined with .toggleClass() as shown in the code snippet below. Additionally, you can determine the index using the .index() method.

$("#rating-container div").click(function(index, item) {
  $('#rating-container div').removeClass('rating-chosen'); // Comment (Delete) this line if you don't want to remove class from previous selection
  $(this).toggleClass('rating-chosen');
  console.log($(this).index());
});

body {
  font-family: Verdana;
}

h1,
h2,
h3 {
  color: darkblue;
}

.rating-circle {
  height: 2em;
  width: 2em;
  border: 0.1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: 0.1em;
}

.rating-hover {
  background-color: yellow;
}

.rating-chosen {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div id="target" class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

Answer 2

To change the class of an element, you can utilize the .removeClass() combined with .toggleClass() as shown in the code snippet below. Additionally, you can determine the index using the .index() method.

$("#rating-container div").click(function(index, item) {
  $('#rating-container div').removeClass('rating-chosen'); // Comment (Delete) this line if you don't want to remove class from previous selection
  $(this).toggleClass('rating-chosen');
  console.log($(this).index());
});

body {
  font-family: Verdana;
}

h1,
h2,
h3 {
  color: darkblue;
}

.rating-circle {
  height: 2em;
  width: 2em;
  border: 0.1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: 0.1em;
}

.rating-hover {
  background-color: yellow;
}

.rating-chosen {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div id="target" class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
</div>

Answer 3

Answer №2

Take a look at this, I just approached it from a slightly different angle:

$(function() {
  $(".rating-circle").click(
    (e) => {
      event = e || window.event;
      var target = event.target || event.srcElement;

      $(".rating-circle").removeClass("rating-chosen");

      $("#" + target.id).addClass("rating-chosen");
    }
  )
});

body {
  font-family: Verdana;
}

h1, h2, h3 {
  color: darkblue;
}

.rating-circle {
  height: 2em;
  width: 2em;
  border: 0.1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: 0.1em;
}

.rating-hover {
  background-color: yellow;
}

.rating-chosen {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rating-container">
  <div class="rating-circle _1" id="1"></div>
  <div class="rating-circle _2" id="2"></div>
  <div class="rating-circle _3" id="3"></div>
  <div class="rating-circle _4" id="4"></div>
  <div class="rating-circle _5" id="5"></div>
</div>

Answer 4

Take a look at this, I just approached it from a slightly different angle:

$(function() {
  $(".rating-circle").click(
    (e) => {
      event = e || window.event;
      var target = event.target || event.srcElement;

      $(".rating-circle").removeClass("rating-chosen");

      $("#" + target.id).addClass("rating-chosen");
    }
  )
});

body {
  font-family: Verdana;
}

h1, h2, h3 {
  color: darkblue;
}

.rating-circle {
  height: 2em;
  width: 2em;
  border: 0.1em solid black;
  border-radius: 1.1em;
  display: inline-block;
  margin: 0;
  padding: 0.1em;
}

.rating-hover {
  background-color: yellow;
}

.rating-chosen {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rating-container">
  <div class="rating-circle _1" id="1"></div>
  <div class="rating-circle _2" id="2"></div>
  <div class="rating-circle _3" id="3"></div>
  <div class="rating-circle _4" id="4"></div>
  <div class="rating-circle _5" id="5"></div>
</div>

Answer 5

Answer №3

$(document).ready(function() {
  $(".rating-circle").click(function() {
    // reset all
    $(this).parent().find('div').removeClass("rating-chosen");
    // Set selected
    $(this).addClass("rating-chosen");
  });
});

Here is a working example

$(this).index() - Retrieves the index of the clicked circle

$(this).toggleClass("rating-chosen");

- Switches the class - adds class if it is not present, removes class if it is already there.

Answer 6

$(document).ready(function() {
  $(".rating-circle").click(function() {
    // reset all
    $(this).parent().find('div').removeClass("rating-chosen");
    // Set selected
    $(this).addClass("rating-chosen");
  });
});

Here is a working example

$(this).index() - Retrieves the index of the clicked circle

$(this).toggleClass("rating-chosen");

- Switches the class - adds class if it is not present, removes class if it is already there.

What is the best way to determine the location of just one element?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to ensure that <div> elements adapt well within a <nav> element to be responsive?

Use Google script to input drop down options directly into a Google spreadsheet

Transferring data from JavaScript variables to PHP function through AJAX requests

Retrieve the ID from the database and showcase the content on a separate page

The issue arises when the logout component fails to render even after the user has been authenticated. This problem resembles the one discussed in the React Router

Ensure the function has completed setting state before proceeding to the next function

Unable to assign changing content to iframe within fancybox on completion

Is it possible to use an input value to rotate an element?

Challenges with JavaScript fetching JSON information

Accessing an Android device from localhost using a hostname with ever-changing IP addresses

Steps to ensure your Bootstrap side menu spans the entire height of the page

Flask not serving Favicon and images to a React application

How can I prevent the div from occupying space using CSS?

Using AngularJS to encapsulate an externally loaded asynchronous library as a service

Transitioning between carousel slides will reveal a clean white backdrop

Displaying Errors from Controllers in React Hook Forms

Limit access to route in ExpressJS only to internal redirects

Troubleshooting a Hover Problem in Firefox

Utilizing Google Places Autocomplete to tailor search outcomes

Toggle the font weight in a text area by clicking a button