Question

我在一个评级星级字段上处理一个小形式，但我不能改变HTML结构，因为它是使用Gravity Forms创建的，所以我可以＆＃34;操纵＆＃34;它与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]元素的兄弟元素。

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

谢谢！

Answer 1

如果必须使用该html结构，则不使用javascript就无法实现。我假设您无法编辑当前元素（如果可以，请执行此操作），因此我也在javascript中包含该元素，并根据需要添加属性。

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

我已将您的列表整理到div，其中包含课程.rating

然后我使用必需的属性更新输入和标签，以模拟评论中的示例。然后我使用jquerys replaceWith函数删除列表结构，只返回包含在inputs div中的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);
  });
}

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

1 个答案: