複数の星評価が1ページに掲載されています

Question

現在、私はWordpress ACFで以下の作業をすることができました。

Link to stackoverflow question

しかし、私は解決することができないんだけど1つの問題は依然として存在しています。私たちのページには複数の星評価がありますが、評価は正常ですが、評価は隠しフィールドに入れられています。しかし、1つの星評価をクリックすると。隠しフィールドはすべて同じ値で更新されます。そしてもちろん、このことは、以下;-)

右ではありません以下は、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)); 

1つ星評価の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入力に達するには、まず親にジャンプする必要があります。このようにして、あなたのスクリプトは入力を見つけ、星の隣の入力のみを更新します。