Question

我正在使用插件对值进行评分：http://www.radioactivethinking.com/rateit/example/example.htm

如果直接插入HTML，以下代码可以正常工作。

<li>
    <p><strong>Product</strong>
        <br/>
        <input type="range" value="0" step="1" id="rateit" data-role="none">
        <div class="rateit" id="rateitHover" data-rateit-backingfld="#rateit" data-rateit-resetable="false"  data-rateit-ispreset="true"
        data-rateit-min="0" data-rateit-max="5">
        </div>
    </p>
</li>

以下代码不起作用，它会通过html检索默认的<input type="range">。

$.getJSON(url, function(data){
    $.each(data, function(index, item) 
    {
        info += "<li id='" + item.id + "'>" +
        "<p><strong>" + item.product + "</strong><br/>" +
        "<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
        "<div class='rateit' id='" + 'rateIt' + item.id + "' data-rateit-backingfld='" + 'rateIt' + item.id + "' data-rateit-resetable='false'  data-rateit-ispreset='true' " +
        "data-rateit-min='0' data-rateit-max='5'></div></p></li>";
    });
    $("#listviewA").append(info); 
    $("#listviewA").trigger("change");
    $("#listviewA").listview("refresh");
});

如何将其转换为该插件？谢谢！

Answer 1

您的第4/5行有语法错误。看看你的“你有额外的。”

    info += "<li id='" + item.id + "'><p><strong>" + item.product + "</strong><br/>" +
    "<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
    "<div class='rateit' id='" + 'rateIt' + item.id + "' data-rateit-backingfld='" + 'rateIt' + item.id + "' data-rateit-resetable='false'  data-rateit-ispreset='true' " +
    "data-rateit-min='0' data-rateit-max='5'></div></p></li>";

Answer 2

好的，我发现这是某种bug或其他什么。我已经使用其他插件进行了测试，但也无法正常工作。我现在使用更好的插件，这更容易。 https://github.com/wbotelhos/raty

html非常简单：<div id="score"></div>，虽然有必要在jQuery上调用它。

$("#score").raty({
    score: function() {
        return $(this).attr('data-rating');
    }
});

我尝试调整它并使所有ID都独一无二：

$.getJSON(url, function(data){
    $.each(data, function(index, item) 
    {
        info += "<li id='" + item.id + "'>" +
        "<p><strong>" + item.product + "</strong><br/>" +
        "<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
        "<div id=" + 'score' + item.id + "></div></p></li>";
    });
    $("#listviewA").append(info); 
    $("#listviewA").trigger("change");
    $("#listviewA").listview("refresh");
});

但继续不行。我也徒劳地尝试过：

$.getJSON(url, function(data){
        $.each(data, function(index, item) 
        {
            info += "<li id='" + item.id + "'>" +
            "<p><strong>" + item.product + "</strong><br/>" +
            "<input type='range' value='0' step='1' id='" + 'rateIt' + item.id + "'/>" +
            "<div id=" + 'score' + item.id + "></div></p></li>";

            $("#score" + item.id).raty({
                score: function() {
                    return $(this).attr('data-rating');
                }
            });
        });
        $("#listviewA").append(info); 
        $("#listviewA").trigger("change");
        $("#listviewA").listview("refresh");
    });

是的，我在页面显示之前加载了这个功能..我不知道这是不是问题。

$(document).on("pagebeforeshow", "#main", function() {
    $(function(){
        get_info();
    });
})

ajax插件之后的jQuery不起作用

2 个答案: