Question

我正在尝试使用此插件（http://antenna.io/demo/jquery-bar-rating/examples/），但无法自定义<select>

HTML：

  <select id="demo" name="rating">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>

jQuery的：

$('#demo').barrating({ 
showValues:true, // If set to true, rating values will be displayed on the bars.
showSelectedRating:true //If set to true, user selected rating will be displayed next to the widget.
});

这是CSS代码，因为我在搜索问题时有一些代码重复：

CSS：

    #demo{
    position: absolute;
    left: 30%;
    top:80%;
    z-index: 10;
}

#demo .br-widget {
    position: absolute;
    left: 30%;
    top:80%;
    z-index: 10;
    }

#demo  .br-widget a {
    display: block;
    width: 15px;
    padding: 5px 0 5px 0;
    height: 30px;
    float: left;
    background-color: #e3e3e3;
    margin: 1px;
    text-align: center;}

#demo  .br-widget a.br-active,
#demo  .br-widget a.br-selected {
    background-color: #59a6d6;}

#demo .br-widget .br-current-rating {
    font-size: 20px;
    line-height: 2;
    float: left;
    padding: 0 20px 0 20px;
    color: #646464;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio : 1.5),
(min-resolution: 192dpi) {
    #demo  .br-widget a {
        background: url('redstarfull.png');
        background-size: 24px 48px;
    }
}

所以，现在我只有一个简洁的纯HTML select。怎么了？任何帮助表示赞赏。

Answer 1

只需删除#demo ID，因为插件正在创建新的DOM节点，请参阅下文：

<select id="demo" name="rating" style="display: none;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>
<div class="br-widget">
    <a href="#" data-rating-value="1" data-rating-text="1" class="br-current br-selected"><span>1</span></a>
    <a href="#" data-rating-value="2" data-rating-text="2" class=""><span>2</span></a>
    <a href="#" data-rating-value="3" data-rating-text="3" class=""><span>3</span></a>
    <a href="#" data-rating-value="4" data-rating-text="4" class=""><span>4</span></a>
    <a href="#" data-rating-value="5" data-rating-text="5" class=""><span>5</span></a>
    <div class="br-current-rating">1</div>
</div>

您的CSS应如下所示：

.br-widget {
    position: absolute;
    left: 30%;
    top:80%;
    z-index: 10;
}

.br-widget a {
    display: block;
    width: 15px;
    padding: 5px 0 5px 0;
    height: 30px;
    float: left;
    background-color: #e3e3e3;
    margin: 1px;
    text-align: center;
}

.br-widget a.br-active,
.br-widget a.br-selected {
    background-color: #59a6d6;
}

.br-widget .br-current-rating {
    font-size: 20px;
    line-height: 2;
    float: left;
    padding: 0 20px 0 20px;
    color: #646464;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio : 1.5),
(min-resolution: 192dpi) {
    .br-widget a {
        background: url('redstarfull.png');
        background-size: 24px 48px;
    }
}

JSFiddle http://jsfiddle.net/30jrn9qm/1/

最好，祝你好运。

jQuery插件未应用于select元素

1 个答案: