javascript - Rails - 具有不显眼的 javascript Jquery UI 进度条的 Ajax

Question

我想实现一个进度条，我离开了 JQUERY UI，并将最大值设置为用户提供的任何数字，并将值设置为需要多少。

我的事件展示页面上有一个用于志愿者的 ajax 表单，一切正常。

但是，在我尝试创建新志愿者后，页面上的每个进度条都会更新为刚刚创建的进度条。

这是我刚刚放入我的 _stuff 部分以渲染出来的 javascript:

%ul.thumbnails

- @stuffs.each do |stuff|
    = javascript_tag do 
        var a = parseInt($('.quantity-have').text());
        var b = parseInt($('.quantity-needed').text());
        $(".progressbar").progressbar({value: a, max: b });

这是一个链接，指向正在发生的事情的图片:

所以我只是点击了第一个项目的志愿者按钮..... 在志愿者表格中输入信息 在创建操作中进行 ajax 调用 和我的

创建.js.erb

$("#new_volunteer").hide();
$('.form').fadeOut();
$('.overlay').remove();
$('.item-collection').html('<%= j render("stuffs/stuff") %>');

只是对元素进行一些隐藏和显示。

我只是想让它更新我正在处理的进度条....

使用 ajax 对我来说还是有点新鲜......

这是在 ajax 调用之后呈现的整个部分

%ul.thumbnails
- @stuffs.each do |stuff|
    = javascript_tag do 
        var a = parseInt($('.quantity-have').text());
        var b = parseInt($('.quantity-needed').text());
        $(".progressbar").progressbar({value: a, max: b });
    %li.span4.items{id: stuff.id}
        .thumbnail{style: 'padding-right: 10px; padding-left: 10px; padding-top: 0 !important;'}
            - if stuff.photo.file?
                = link_to(image_tag(stuff.photo.url, style: 'height: 200px; width: 300px;'), admin_event_stuff_volunteers_path(@eventable, stuff.stuffable, stuff, style: 'height: 200px; width: 300px;')) 
            - else 
                / = link_to(image_tag('placeholder.jpg'), admin_event_stuff_volunteers_path(@eventable, stuff.stuffable, stuff))
            .caption
                %h4
                    = link_to stuff.name, admin_event_stuff_volunteers_path(@eventable, stuff.stuffable, stuff), style: 'color: #555555;'
                %b
                    Item Goal:
                %span.quantity-have
                    = stuff.quantity_have.to_i
                    out of a total of 
                %b.quantity-needed
                    = stuff.quantity_needed
                %br
                    .progressbar
                        / Quantity Have:
                        / = stuff.quantity_have.to_i
                - if stuff.quantity_needed.to_i == stuff.quantity_have
                - else
                    = link_to "Volunteer", new_admin_event_stuff_volunteer_path(@admin, stuff.stuffable, stuff), class: 'btn btn-success add-volunteer', remote: true
                    - if stuff.buy_link.present?
                        = link_to "Where to buy this", stuff.buy_link, class: 'btn btn-warning volunteer'

它正在我的 EVENTS MODEL 展示页面上呈现 (不知道这是否相关只是想我会把它扔在那里)

我知道它为什么这样做，因为在我的 javascript 中，我只是告诉它只查找其中一个帖子的值(value)，但我需要找到每个帖子的值(value)。

Answer 1

在您的 $(".progressbar").progressbar({value: a, max: b }); 行中，您正在所有 上初始化进度条现有进度条 - 您需要确保只针对循环中的相关进度条。

为此尝试在每个进度条上设置一个唯一的 ID，例如:.progressbar{id:"progressbar-#{stuff.id}"} 然后更改您的 javascript 以引用该特定 ID:$("#progressbar-#{stuff.id}").progressbar({value: a, max: b });