jquery 解决的单选按钮星级从右到左而不是从左到右工作

6jjcrrmo 于 2023-06-29 发布在 jQuery

关注(0)|答案(5)|浏览(111)

让悬停从最左边的星星向最右边的星星移动的诀窍是什么？像flex-direction: row-reverse;和direction: rtl;这样的东西不算，因为它们也颠倒了恒星的顺序。

.rating-container input[type="radio"] {
  display: none;
}

.rating-container label {
  display: inline-block;
  cursor: pointer;
}

.rating-container svg {
  fill: #ccc;
}

.rating-container input[type="radio"]:checked ~ label svg,
.rating-container label:hover ~ label svg,
.rating-container label:hover svg {
  fill: #000;
}

<div id="rating-rate" class="rating-container" name="revrating">
                        <input type="radio" id="rating1" name="revrating" value="1">
                        <label for="rating1"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                        <input type="radio" id="rating2" name="revrating" value="2">
                        <label for="rating2"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                        <input type="radio" id="rating3" name="revrating" value="3">
                        <label for="rating3"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                        <input type="radio" id="rating4" name="revrating" value="4">
                        <label for="rating4"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                        <input type="radio" id="rating5" name="revrating" value="5">
                        <label for="rating5"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                    <span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span></div>

jquery

来源：https://stackoverflow.com/questions/76570481/solved-radio-buttons-star-rating-works-from-right-to-left-instead-of-left-to-rig

5条答案

按热度按时间

j0pj023g1#

$(document).ready(function() {
   $('#rating-rate span').on('click', function(){
   $('#rating-rate span').removeClass('active');
    var stars = $(this).find('input').val();
     for (i = 1; i <= stars; i++) {
       $('#rating'+i).parent().addClass('active');
     } 
     
  });
});

.rating-container input[type="radio"] {
  display: none;
}

.rating-container label {
  display: inline-block;
  cursor: pointer;
}

.rating-container svg {
  fill: #ccc;
}

span:has(~:hover) > label svg{
     fill: #000;
}

span:hover label svg{
  fill: #000;
}

 #rating-rate span.active  label svg {
     fill: #000;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <div id="rating-rate" class="rating-container" name="revrating">
                          <span>
                            <input type="radio" id="rating1" name="revrating" value="1">
                            <label for="rating1"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                            </span>
                            <span>
                            <input type="radio" id="rating2" name="revrating" value="2">
                            <label for="rating2"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                            </span>
                            <span>
                            <input type="radio" id="rating3" name="revrating" value="3">
                            <label for="rating3"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                            </span>
                            <span>
                            <input type="radio" id="rating4" name="revrating" value="4">
                            <label for="rating4"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                            </span>
                            <span>
                            <input type="radio" id="rating5" name="revrating" value="5">
                            <label for="rating5"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                            </span>
                        <span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span></div>

赞(0）回复(0）举报 2023-06-29

k4aesqcs2#

你试过：has操作符了吗？有点新，但允许这种选择。它允许您选择具有特定特征的每个元素，在您的情况下，所有具有较晚兄弟的星星：hover。这段代码应该能成功

label:has(~:hover)>svg,
    label:hover>svg{
       fill: #000;
    }

赞(0）回复(0）举报 2023-06-29

vtwuwzda3#

您可以使用direction: rtl;，但您需要反转radio值，使第一个值为5，直到1成为最后一个值

// For testing only (To see the selected value)
setInterval(() => {  console.log(document.querySelector('input[name="revrating"]:checked')?.value)
}, 1000)

.rating-container {
  direction: rtl;
  width: fit-content;
}

.rating-container input[type="radio"] {
  display: none;
}

.rating-container label {
  display: inline-block;
  cursor: pointer;
}

.rating-container svg {
  fill: #ccc;
}

.rating-container input[type="radio"]:checked~label svg,
.rating-container label:hover~label svg,
.rating-container label:hover svg {
  fill: #000;
}

<div id="rating-rate" class="rating-container" name="revrating">
  <input type="radio" id="rating5" name="revrating" value="5">
  <label for="rating5"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input type="radio" id="rating4" name="revrating" value="4">
  <label for="rating4"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input type="radio" id="rating3" name="revrating" value="3">
  <label for="rating3"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input type="radio" id="rating2" name="revrating" value="2">
  <label for="rating2"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input type="radio" id="rating1" name="revrating" value="1">
  <label for="rating1"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span></div>

赞(0）回复(0）举报 2023-06-29

vhipe2zx4#

以下是我们如何解决错误的悬停和选择方向的问题。

(css解决方案由Giuliano Gostinfini和Mitali Patel提供，谢谢）

$(document).ready(function() {
  $('.rating-container input[type="radio"]').change(function() {
    var selectedRating = $(this).val();
    $('.rating-container label svg').each(function(index) {
      if (index < selectedRating) {
        $(this).css('fill', '#000');
      } else {
        $(this).css('fill', '#ccc');
      }
    });
  });
});

.rating-container input[type="radio"] {
      display: none;
    }

    .rating-container label {
      display: inline-block;
      cursor: pointer;
    }

    .rating-container svg {
      fill: #ccc;
    }

    label:has(~:hover) > svg, label:hover > svg {
         fill: #000;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rating-rate" class="rating-container" name="revrating">
                            <input type="radio" id="rating1" name="revrating" value="1">
                            <label for="rating1"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                            <input type="radio" id="rating2" name="revrating" value="2">
                            <label for="rating2"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                            <input type="radio" id="rating3" name="revrating" value="3">
                            <label for="rating3"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                            <input type="radio" id="rating4" name="revrating" value="4">
                            <label for="rating4"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                            <input type="radio" id="rating5" name="revrating" value="5">
                            <label for="rating5"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                        <span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span></div>

赞(0）回复(0）举报 2023-06-29

2admgd595#

将<input> s、<label> s和<svg> s的容器设置为flex容器，然后通过添加以下CSS反转其方向：

.rating-container {
  display: flex;
  flex-flow: row-reverse nowrap;
  justify-content: flex-end;
}

接下来，颠倒每个<input>上的值的顺序：

<input ... value="5">
<input ... value="4">
<input ... value="3">
<input ... value="2">
<input ... value="1">

如果HTML无法更改，只需在页面加载后以编程方式分配值即可：

// Plain JavaScript
document.querySelectorAll("[type='radio]").forEach((r, i, a) => {
  r.value = a.length - i;
}); 
// OR
// jQuery
$(":radio").each(function(i) {
  let size = $(":radio").length;
  $(this).val(size - i);
});

在下面的示例中，容器是<form id="rating">，为了简单起见，名称略有更改，但HTML布局没有更改。添加了一些JavaScript来演示当用户选择一颗星星时会分配正确的值。
此示例将把选中的值提交给实时测试服务器。

路线

1.单击“★”。
1.注意控制台中显示的值。
1.单击“发送”按钮。
1.注意下面iframe中显示的服务器响应。

// For demonstration purposes
const main = document.forms.rating;

main.onchange = e => console.log(e.target.value);

Array.from(main.elements.rating).forEach((r, i, a) => r.value = a.length - i);

/* This version will work specifically for OP code */

// document.querySelectorAll("[type='radio']").forEach((r, i, a) => r.value = a.length - i);

/* This is a jQuery version of the previous line */

/*
$(":radio").each(function(i) {
  let size = $(":radio").length;
  $(this).val(size - i);
});
*/

#rating {
  display: flex;
  flex-flow: row-reverse nowrap;
  justify-content: flex-end;
}

[name="rating"] {
  display: none;
}

label {
  display: inline-block;
  cursor: pointer;
}

svg {
  fill: #ccc;
}

[name="rating"]:checked~label svg,
label:hover~label svg,
label:hover svg {
  fill: #000;
}

/* All of the proceeding CSS is for demonstration purposes */

button {
  margin-left: 24px;
  cursor: pointer;
}

iframe {
  display: block;
  width: 100%;
  margin-top: 12px;
}

.as-console-row::after {
  width: 0;
  font-size: 0;
}

.as-console-row-code {
  width: 100%;
  word-break: break-word;
}

<!-- Attributes "action", "method", and "target" are for
demonstration purposes -->
<form id="rating" action="https://httpbin.org/post" method="post" target="response">
  <!-- button is for demonstration purposes -->
  <button>Send</button>
  <input id="rating1" name="rating" type="radio" value="1">
  <label for="rating1"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input id="rating2" name="rating" type="radio" value="2">
  <label for="rating2"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input id="rating3" name="rating" type="radio" value="3">
  <label for="rating3"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input id="rating4" name="rating" type="radio" value="4">
  <label for="rating4"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input id="rating5" name="rating" type="radio" value="5">
  <label for="rating5"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
</form>
<!-- iframe is for demostration purposes -->
<iframe name="response"></iframe>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

赞(0）回复(0）举报 2023-06-29

我来回答

jquery 解决的单选按钮星级从右到左而不是从左到右工作

5条答案

相关问题

热门标签

最新问答