0

我有一个带有星星的代码来投票内容。

在我将图标更改为 svg 之前它工作正常，它没有检测到此类图标中的悬停或点击，但在使用<i>图标之前，它确实有效。

我能做些什么？

这是代码：

<div class="center l" id="votes">
    <span class="sepleftright">Vote: </span>
<svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-1"></i> -->
<svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-2"></i> -->
<svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-3" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-3"></i> -->
<svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-4" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-4"></i> -->
<svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-5" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-5"></i> -->
</div>

我的 JavaScript 代码：

<script>
$(document).ready(function(){
  $("#v-1,#v-2,#v-3,#v-4,#v-5").hover(function () {
    var val = $(this).attr('id');
    var orden = val.split("-");
    for (var i = 0; i <= 5; i++) {
        if (i <= orden[1]) $("#v-" + i + "").addClass( "tnrnj" );
        else $("#v-" + i + "").removeClass( "tnrnj" );
     }

  });
  $("#v-1,#v-2,#v-3,#v-4,#v-5").click(function () {
    var val = $(this).attr('id');
    $.post("/jx/vote.php", {  vote: val }, function(data){
      $("#votes").html(data);
    });
  });
});
</script>
4

2 回答 2

0

您的代码运行良好。但是您需要删除fill="currentColor"才能看到更改。如果不是，则<path>元素的填充将始终为“currentColor”。

下面是一个工作示例：

$(document).ready(function(){
  $("#v-1,#v-2,#v-3,#v-4,#v-5").hover(function () {
    var val = $(this).attr('id');
    var orden = val.split("-");
    for (var i = 0; i <= 5; i++) {
        if (i <= orden[1]) $("#v-" + i + "").addClass( "tnrnj" );
        else $("#v-" + i + "").removeClass( "tnrnj" );
     }

  });
  $("#v-1,#v-2,#v-3,#v-4,#v-5").click(function () {
    var val = $(this).attr('id');
    /*$.post("/jx/vote.php", {  vote: val }, function(data){
      $("#votes").html(data);
    });
    */
    alert(val);
  });
});
.fa-star {
  max-width: 100px;
  height: auto;
  fill: #000000;
}

.tnrnj {
  fill: #FFFF00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center l" id="votes">
  <span class="sepleftright">Vote: </span>
  <svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
  </svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-1"></i> -->
  <svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
  </svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-2"></i> -->
  <svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-3" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
  </svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-3"></i> -->
  <svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-4" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
  </svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-4"></i> -->
  <svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-5" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
  </svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-5"></i> -->
</div>

于 2020-04-17T01:24:48.213 回答
0

刚才测试了这个，mouseover和click事件都工作正常：

let v1 = document.getElementById('v-1');
v1('mouseover', () => console.log('v-1 mouseover'));
v1('click', () => console.log('v-1 click'));
于 2020-04-17T01:21:49.217 回答