输入 class 评分时不显示工具提示

Question

<input type="hidden" class="rating"/>

时不显示工具提示

<input type="hidden" class="rating1"/>

时显示工具提示

我的代码在这里

<input type="hidden" class="rating"/>

        <script>
        $('.rating').rating({
        extendSymbol: function (rate) {
        $(this).tooltip({
        container: 'body',
        placement: 'bottom',
        title: 'Rate ' + rate
        });
        }
        });
        </script>

<input type="hidden" class="rating1"/>

        <script>
        $('.rating1').rating({
        extendSymbol: function (rate) {
        $(this).tooltip({
        container: 'body',
        placement: 'bottom',
        title: 'Rate ' + rate
        });
        }
        });
        </script>

        <style>
        .symbol {
        display: inline-block;
        border-radius: 50%;
        border: 5px double white;
        width: 30px;
        height: 30px;
        }
        </style>

Answer 1

问题是因为您使用的插件（真的，真的很愚蠢）会自动将自己分配给 class 为 .rating 的任何元素，并且没有指定参数 - 请参阅最后 4 行代码在这里：http://dreyescat.github.io/bootstrap-rating/bootstrap-rating.js

要解决您的问题，您只需给您的 input 一个不同的 class，这样它就会使用您提供的设置，而不是默认的无参数初始化。试试这个：

<input type="hidden" class="star-rating" /> <!-- note the changed class -->

$('.star-rating').rating({
    extendSymbol: function(rate) {
        $(this).tooltip({
            container: 'body',
            placement: 'bottom',
            title: 'Rate ' + rate
        });
    }
});

Updated fiddle

另请注意，您可以使用带有单个 jQuery 选择器的通用 class 来初始化所有元素上的插件。有关示例，请参见 fiddle。

我还会联系插件作者并让他们删除自动将插件分配给任何带有 .rating class 的代码行 - 在public 使用的插件。

输入 class 评分时不显示工具提示

Tooltip not shown when input class is rating

jquery

twitter-bootstrap-3

rating

twitter-bootstrap-tooltip