将单选按钮转换为星级

Question

我正在尝试将表单中的单选按钮转换为星级评分

我正在使用nintex表单，并且单选按钮的DOM结构如下所示

{{1}}

现在我找到了一个符合我预期的jsfiddle，但dom结构不同

我做了一些调整，并且单选按钮显示为星号，但它没有按预期工作

Here is the fiddle

我希望顶级星级评分的效果与底部的星级评分相同。

P.S：如果底部的一个在更改后不起作用，那就没关系了。我只想让星级评分适用于我的DOM结构（小提琴中的前一个）

Answer 1

问题：你的“标签”并不是彼此相邻的。将css和事件选择转换为“td”。

https://jsfiddle.net/8cn2mekf/1/

Answer 2

试试这个，我刚刚添加了撤消

$('.controls.rating')
    .addClass('starRating') //in case js is turned off, it fals back to standard radio button
    .on('mouseenter', 'label', function(){
            DisplayRating($(this)); // when we hover into a label, show the ratings
        }
    )
    .on('mouseleave', function() {
        // when we leave the rating div, figure out which one is selected and show the correct rating level
        var $this = $(this),
            $selectedRating = $this.find('input:checked');
        if ($selectedRating.length == 1) {
            DisplayRating($selectedRating); // a rating has been selected, show the stars
        } else {
            $this.find('label').removeClass('on'); // nothing clicked, remove the stars
        };
    }
);

var DisplayRating = function($el){
    // for the passed in element, add the 'on' class to this and all prev labels
    // and remove the 'on' class from all next labels. This stops the flicker of removing then adding back
    $el.addClass('on');
    $el.parent('label').addClass('on');
    $el.closest('td').prevAll().find('label').addClass('on');
    $el.closest('td').nextAll().find('label').removeClass('on');
};

编辑：我最近发现了一个错误，所以我编辑了它并修复了错误

JS Fiddle

Answer 3

您需要使用find删除更深层节点上的on类children仅适用于第一级子节点

https://jsfiddle.net/sanddune/z1sws1w7/