一页上的多个星级

Question

目前，我已经设法使用我的 Wordpress ACF 完成以下工作。

Link to stackoverflow question

但仍有一个问题我无法解决。我们希望在我们的页面上有多个星级评级，评级工作正常，但评级被放在隐藏字段中。但是当我们点击一​​个星级时。所有隐藏字段都将更新为相同的值。当然这是不对的 ;-)

下面是jQuery插件代码

(function ( $ ) { 

$.fn.customStarRatings = function(obj) {
    var wrapper = this;
    var stars = obj.childClass;
    var input = obj.inputClass;
    $(wrapper).hover(function() {
        activeClassCount = $(this).find('.rating').index() + 1;
    }, function() {
        var $this = $(this);
        $this.find(stars).slice(1, activeClassCount).addClass('is-active');
        $this.find(stars).slice(activeClassCount, 10).not('.rating').removeClass('is-active');
        //console.log($this.find(stars).slice(activeClassCount, 4).not('.rating'))
    });
    $(stars).hover(function() {
        $(this).prevAll(stars).add($(this)).addClass('is-active');
        $(this).nextAll(stars).removeClass('is-active');
    });
    $(stars).click(function(event) {
        $(".rating").removeClass("rating");
        $(this).addClass('rating');
        activeClassCount = $(this).index() + 1;
        $(this).prevAll(stars).addClass('is-active');
        if (input) {
            $(input).val(($(this).index() + 1));
            console.log($(input).val(), activeClassCount)
        }
    });
}

$(this).find(".acf-input").customStarRatings({
    childClass: ".c-rating__item",
    inputClass: ".rank"
});

}( jQuery ));

以下是一星评级的 HTML

<div class="acf-input">
    <ul class="c-rating">
        <li class="c-rating__item is-active left" data-index="1"></li>
        <li class="c-rating__item  is-active" data-index="2"></li>
        <li class="c-rating__item left is-active" data-index="3"></li>
        <li class="c-rating__item  is-active" data-index="4"></li>
        <li class="c-rating__item left is-active" data-index="5"></li>
        <li class="c-rating__item  is-active" data-index="6"></li>
        <li class="c-rating__item left is-active" data-index="7"></li>
        <li class="c-rating__item is-active rating" data-index="8"></li>
        <li class="c-rating__item left is-active" data-index="9"></li>
        <li class="c-rating__item" data-index="10"></li>
    </ul>
    <input type="hidden" class="rank" name="acf[field_59e75157e6ae9]" value="1">                    
</div>

我认为它在点击部分。但我不是那么好的 jquery 开发人员。

Answer 1

$(input).val(($(this).index() + 1));

这一行正在全球化输入。改成这样：

$(this).parent().next(input).val(($(this).index() + 1));

或扩展修复：

if ($(this).parent().next(input).length > 0) {
    $(this).parent().next(input).val(($(this).index() + 1));
    console.log($(this).next(input).val(), activeClassCount)
}

在你发给我的小提琴之后，我意识到this 指的是明星项目，而不是明星容器，并且输入在容器旁边。您需要先跳转到父级才能到达直接的.rank 输入。这样，您的脚本将找到输入并仅更新星星旁边的输入。