Question

这一整天对我来说都是一个活生生的地狱。我正在与Jquery ui合作为一个网站创建标签，该网站显示一些带有五个进度条的文本。我可以在没有标签的情况下创建进度条对象。

第一次填充div以创建选项卡根本不会带来任何问题。所有选项卡都创建并完美显示，如下所示。

enter image description here

现在问题是使用新元素和进度条对象重新填充整个选项卡。我已经搜索并尝试了很多答案，甚至是StackOverflow的很多答案，试图重新填充此选项卡。我无法弄明白。我尝试的每个答案都不会显示任何标签，只显示所有进度条对象，或者只是元素检查器中的简单错误消息。

以下是创建新标签的代码部分（需要警告，充满压力的一天，失望和愤怒会导致丑陋的代码）

function GetRatings()
{
    for(var i = 0; i < localStorage.length;i++)
    {   
        var rateItem = $.parseJSON(localStorage.getItem("rating" + (i+1)));

        if(rateItem != null)
        {
            if(rateItem.bossName == $('.reviewName').text())
            {
                $('.allRatingsBox').append("<div id = singleRate "+ i +"><p>" + rateItem.raterName + " rated: </p><div class = lBar>leadership:" + rateItem.leadership + "</div><div class = pBar>professionality:" + rateItem.professional + "</div><div class = fBar>fairness:" + rateItem.fairness + "</div><div class = cBar>charisma:" + rateItem.charisma + "</div><div class = uBar>understanding:" + rateItem.understanding + "</div><p>" + '"' + rateItem.comment + '"' + "</p></div>");
                $('.ratingTabholder').append("<li><a href=#singleRate" + i + "> </a> </li>");

                $(".lBar").attr('class', 'lBar' + i);
                $(".pBar").attr('class', 'pBar' + i);
                $(".fBar").attr('class', 'fBar' + i);
                $(".cBar").attr('class', 'cBar' + i);
                $(".uBar").attr('class', 'uBar' + i);
                $("#singleRate").attr('id', 'singleRate' + i);

                $( ".lBar" + i ).progressbar({ value: parseInt(rateItem.leadership)*10 });
                $( ".pBar" + i).progressbar({ value: parseInt(rateItem.professional)*10 });
                $( ".fBar" + i).progressbar({ value: parseInt(rateItem.fairness)*10 });
                $( ".cBar" + i).progressbar({ value: parseInt(rateItem.charisma)*10 });
                $( ".uBar" + i).progressbar({ value: parseInt(rateItem.understanding)*10 });

                $(".lBar" + i + " > div").css({ 'background': 'Blue' }); 
                $(".pBar" + i + " > div").css({ 'background': 'Green' }); 
                $(".fBar" + i + " > div").css({ 'background': 'Red' }); 
                $(".cBar" + i + " > div").css({ 'background': 'Orange' }); 
                $(".uBar" + i + " > div").css({ 'background': 'Purple' }); 


            }
            else
            {
                continue;
            }
        }
        else
        {
            continue;
        }
    }
}

它可能不会带来任何重要的东西，但这是我的HTML代码的一小部分

    </div>
        <div class="allRatingsBox"> 
            <ul class="ratingTabholder">

            </ul>
        </div>
    </div>

最后，经过一整天的尝试来解决这个问题，这是我最近尝试清空标签元素的代码

function RemoveTabs()
{

    for(var i = 0; i < localStorage.length;i++)
    {   
        var rateItem = $.parseJSON(localStorage.getItem("rating" + (i+1)));

        if(rateItem != null)
        {
            if(rateItem.bossName == $('.reviewName').text())

                $( "#singleRate" + i).remove();
            }
        }
        $(".ratingTabholder").empty();
        $( ".allRatingsBox" ).tabs( "refresh" );
    }

这是第一次制作，删除和重新创建标签后的样子

enter image description here

为什么它不像第一张图片那样创建完美的标签。为什么要将一切都放在彼此之下？我希望你们能帮助我。如果您想要查看缺失的东西，或者我必须更正确地解释它，请告诉我。我现在非常沉闷，所以有些事情可能是错误的或被误解了。

Answer 1

我只是简单地查看了您的代码，但发现了Javascript中的一些错误。

1）运算符应为！==以下语句的两个实例

if(rateItem != null)

2）你的parseInt调用需要第二个参数来指定基数。

$( ".lBar" + i ).progressbar({ value: parseInt(rateItem.leadership, /*put base here*/)*10 });
$( ".pBar" + i).progressbar({ value: parseInt(rateItem.professional, /*put base here*/)*10 });
$( ".fBar" + i).progressbar({ value: parseInt(rateItem.fairness, /*put base here*/)*10 });
$( ".cBar" + i).progressbar({ value: parseInt(rateItem.charisma, /*put base here*/)*10 });
$( ".uBar" + i).progressbar({ value: parseInt(rateItem.understanding, /*put base here*/)*10 });

可能是这样的简单错误吗？

Answer 2

发现问题。经过几个小时的反复试验，我发现了删除评级，删除标签，获得评级和刷新标签的完美范围。

$( ".allRatingsBox" ).children("div").remove();
RemoveTabs();
GetRatings();
$( ".allRatingsBox" ).tabs( "refresh" );

Jquery删除创建的选项卡并重新创建它们

2 个答案: