html - 如何使用 CSS 制作特定评级的星级小部件？

Question

我正在为一个小表格制作评级星域，但我无法更改 HTML 结构，因为它是使用 Gravity Forms 创建的，所以我只能用 CSS“操纵”它。

表单结构如下:

<ul>
    <li>
        <input type="radio" value="5">
        <label>5/label>
    </li>
    <li>
        <input type="radio" value="4">
        <label>4</label>
    </li>
    <li>
        ...
    </li>
</ul>

我一直在使用 this example但是现在，有了这个结构，[input/label] 元素就不再是其他 [input/label] 元素的 sibling 了。

如何在不修改标记的情况下使其工作？

谢谢!

Answer 1

如果你必须使用那个 html 结构，你不能不使用 javascript。我假设您也不能编辑当前元素(如果可以，请这样做)，所以我也将其包含在 javascript 中，并根据需要添加属性。

http://codepen.io/partypete25/pen/BjyegJ

在这里，我将您的列表包装在 div 中与类 .rating

然后我用所需的属性更新输入和标签，以模拟您在评论中的示例。然后我使用 jquerys replaceWith函数删除列表结构并仅返回 inputs和 labels , 包裹在 .ratings分区

$(".rating ul li").each(function(i){
  $("input", this).attr({
    "id" : "star"+parseInt(5-i),
    "name" : "rating"
  });
  $("label", this).attr({
    "class": "full",
    "for" : "star"+parseInt(5-i),
    "title" : "Awesome - "+parseInt(5-i)+" stars"
  });
});
replaceIt();
function replaceIt() {
  $(".rating ul").replaceWith(function() {
    return $('input, label', this);
  });
}