引导星级评定显示两次 [英] Bootstrap star-rating shown two times

问题描述

我用这插件显示星级在我的引导程序的网站。下面是模式code中，我把星级的一部分（见input元素）：

I am using this plugin to show star rating on my Bootstrap website. Here is part of the modal code in which I put the star rating (see the input element):

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="userTitle"></h4>
        <input id="avg" class="rating" min=0 max=5 step=0.1 data-size="xs" data-readonly="true" data-show-clear="false" data-show-caption="false">
        <small id="tot_reviews"></small>
      </div>
      <div class="modal-body">

下面是JS code中的一部分，我在其中动态设置星星的值：

Here is the part of JS code in which I dynamically set the value of the stars:

$.getJSON("getData.php?rating=" + user.id, function(data) {
    if (data) {
        $.each(data, function(key, val) {
            var reviews = val.tot_reviews;

            $('#avg').rating('update', val.average);
            $("#tot_reviews").html("(" + reviews + " reviews)").html();
        });
    }
});

这似乎运作良好，事实上当我点击我得到这个页面的项目：

It seems to work well, in fact when I click on an item of the page I get this:

如果我再次点击同一项目我得到这样的：

If I click again on the same item I get this:

我想不通为什么会这样。

I can't figure out why this happens.

推荐答案

一些准则来检查：

• 请注意，如果您已设置的输入类=得分插件会自动 而不需要JavaScript的code初始化在你身边 初始化。这是中提到的文档的用法部分， 在插件功能，并且还与的第一个例子 文档的基本用法部分。
• 因此，如果您使用自己的JavaScript来初始化插件请勿 设置类=得分，否则你将有两个平行 初始化造成不良影响。

• Note if you have set the input class=rating the plugin will be auto initialized without A NEED for javascript code on your side to initialize. This is mentioned in the usage section of the docs, the plugin features, and also with the first example on the basic usage section of the documentation.
• Hence if you use your own javascript to initialize the plugin DO NOT set the class = rating, else you will have two parallel initializations causing undesirable effects.

此外，您还可以注意：

• 确保你有一个唯一的ID在页面上的HTML input元素。 复制的ID将有不良的影响，打破明星 评级jQuery插件，它使用元素的ID来初始化。对于 例如，如果您有多个收视率在页面上＆LT;输入ID =平均＆GT; 应该是唯一的东西，如＆LT;输入ID =平均-1＆GT; ，＆LT;输入 ID =平均-2＆GT; 等。
• 您有一个循环在code $。每个 ...不知道那是什么呢？ 但它是更新的评级。确保你 不以某种方式破坏通过Ajax呈现的HTML元素和 另一个重新初始化 - 复制评级显示

• Ensure you have an unique ID for your HTML input element on the page. Duplicating the ID will have undesirable effects and break the star rating jquery plugin which uses the element ID to initialize. For example, if you have multiple ratings on the page <input id="avg"> should be unique with something like <input id="avg-1"> , <input id="avg-2"> and so on.
• You have a loop in your code $.each... not sure what that does... but it is updating the rating. Ensure you are not in some way destroying an element with ajax rendered HTML and reinitializing another - duplicating the rating display.

这篇关于引导星级评定显示两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！