Question

我正在使用jquery.barRating.js对呈现给我的页面的每个div元素进行评级。

我必须为每个div渲染以下html ..目前有四个渲染。

<div class="star-ratings">
              <p>Rate This Video</p>
              <div class="stars stars-example-fontawesome-o">
                <select class="example-fontawesome-o" name="rating" data-current-rating="" autocomplete="off">
                  <option value=""></option>
                  <option value="1">1</option>
                  ..........
                </select>
                <span class="title current-rating">
                  Current rating: <span class="value">5</span>
                </span>
                <span class="title your-rating hidden">
                  Your rating: <span class="value"></span>&nbsp;
                  <a href="#" class="clear-rating"><i class="fa fa-times-circle"></i></a>
                </span>
              </div>
            </div>

每个评级选择都由以下脚本启动，该脚本采用选项initialRating - 这告诉脚本应该突出显示多少个星星。

var arrOfRatings = [5,4,6,7];

$('.example-fontawesome-o').each(function (i, obj) { // Each instance of .example-fontawesome-o

    $(obj).barrating({
        theme: 'fontawesome-stars-o',
        showSelectedRating: false,
        initialRating: parseFloat(arrOfRatings[i]), // Array set up earlier with ratings in
        onSelect: function (value, text) {

            var starRatingSelector = $(this)[0].$elem.parent().parent(); // div.stars.stars-example-fontawesome-o
            var starRatingChildCurrentRating = starRatingSelector.children('.current-rating'); // .stars.stars-example-fontawesome-o span.title.current-rating.hidden
            var starRatingChildYourRating = starRatingSelector.children('.your-rating'); // .stars.stars-example-fontawesome-o span.title.your-rating.hidden


            if (!value) {
                obj.barrating('clear'); // Clear rating if there was a problem
            } else {

                starRatingChildCurrentRating.addClass('hidden');


                starRatingChildYourRating.removeClass('hidden')
                        .find('span')
                        .html(value);
            }

        },
        onClear: function (value, text) {
            console.log($(this));
            var clearSelector = $(this)[0].$elem.parent().parent();


            clearSelector.children('.current-rating')
                    .removeClass('hidden')
                    .end()
                    .find('.your-rating')
                    .addClass('hidden');
        }
    });


});

评分在上面的html中 -

<span class="title current-rating">
                      Current rating: <span class="value">5</span>
                    </span>

但此刻，我不得不传递一系列评级，我也必须将其传递给选项。 initialRating: parseFloat(arrOfRatings[i])

我不得不这样做，因为我无法访问$（this），直到脚本超过以下

$(obj).barrating({
        theme: 'fontawesome-stars-o',
        showSelectedRating: false,
        initialRating: parseFloat(arrOfRatings[i]),
        onSelect: function (value, text) { // Can only access $(this) here}

所以在一个清除的摘要中，我想知道是否有办法从<span class="value">5</span>中获取值5并将其传递给initialRating而不使用额外的数组？

Answer 1

假设子元素的顺序与数组中的顺序匹配，并且具有类current-rating的唯一元素是您需要的元素，则可以使用

initialRating: parseFloat($('.current-rating').eq(i).find('.value').text()),

https://api.jquery.com/eq/

将值传递给方法选项的更有效/更清晰的方法？

1 个答案: