Question

我正在创建一个简单的评级应用程序，但是，我希望所有选定的圈子保持绿色，而不是让所有圈子变成绿色。

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

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链接：

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

Answer 1

您可以将.removeClass()与.toggleClass()一起使用，如下所示。您可以使用.index()方法找到索引。

let data2 = await Promise.all( data.map( async (item) => {
          item.set('productCount', await Product.find({categories:item._id}).countDocuments()  ,{strict:false});
          return item

     }))

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

Answer 2

您应将click事件添加到rating-circle元素中。

如果您仍然需要点击子项的索引，请采用以下方法。

就像@Nevin提到的那样，有一种使用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

检查一下。我只是使用了一种稍微不同的方法：

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

工作fiddle

$(this).index()-给出点击的圆圈的索引

$(this).toggleClass("rating-chosen");-切换类-如果不存在则添加类，如果存在则删除类。

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

4 个答案: