如何确定单个元素的位置？

Question

I'm creating a simple rating application, however, instead of all the circles turning green, I only want the selected circle to remain green.

$('#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');
});

The HTML:

<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>

Codepen link below:

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

Answer 1

You can use .removeClass() with .toggleClass() like below. And you can find 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

You should add the click event to the rating-circle element.

If you still need the index of the clicking child, here's the approach.

As @Nevin mentioned, there's an easier way to get the index using jQuery

 $(document).ready(function() { $(".rating-circle").click(function() { $(this).addClass("rating-chosen"); // let index = [...this.parentElement.children].indexOf(this); let index = $(this).index() console.log(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 class="rating-circle"></div> <div class="rating-circle"></div> <div class="rating-circle"></div> </div> 

Answer 3

Check this out. I just used a slightly different approach:

 $(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

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

Working fiddle

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

$(this).toggleClass("rating-chosen"); - Toggles the class - adds class if it is not present, removes class if it is present.