Question

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

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

以下是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输入。这样，您的脚本将找到输入并仅更新星号旁边的输入。

一页上有多个星级评分

1 个答案: