Question

我正在设计一个有9张图像的进度条。最初应该没有填充。根据我需要用填充图像替换它们的状态（我有进度条的填充和未填充图像）。任何人都可以帮我解决我的问题。

以下是我在视图中显示未填充图像的代码：

<div id="ProgressBar" style="text-align: center">
        <img id="imgArrow1" src="@Url.Content("~/Content/img/left_filled.png")" />
       @* <label class="Pbar">
            <img id="imgArrow2"  src="@Url.Content("~/Content/img/middle_unfilled.png")" />
            <img id="imgArrow3"  src="@Url.Content("~/Content/img/middle_unfilled.png")" />
            <img id="imgArrow4"  src="@Url.Content("~/Content/img/middle_unfilled.png")" />
            <img id="imgArrow5"  src="@Url.Content("~/Content/img/middle_unfilled.png")" />
            <img id="imgArrow6"  src="@Url.Content("~/Content/img/middle_unfilled.png")" />
            <img id="imgArrow7"  src="@Url.Content("~/Content/img/middle_unfilled.png")" />
            <img id="imgArrow8"  src="@Url.Content("~/Content/img/middle_unfilled.png")" /></label>*@



         <label class="Pbar"><img id="imgArrow2"  src="@Url.Content("~/Content/img/middle_unfilled.png")" /></label>
           <label class="Pbar">  <img id="imgArrow3"  src="@Url.Content("~/Content/img/middle_unfilled.png")" /></label>
          <label class="Pbar">   <img id="imgArrow4"  src="@Url.Content("~/Content/img/middle_unfilled.png")" /></label>
          <label class="Pbar">   <img id="imgArrow5"  src="@Url.Content("~/Content/img/middle_unfilled.png")" /></label>
          <label class="Pbar">   <img id="imgArrow6"  src="@Url.Content("~/Content/img/middle_unfilled.png")" /></label>
          <label class="Pbar">   <img id="imgArrow7"  src="@Url.Content("~/Content/img/middle_unfilled.png")" /></label>
           <label class="Pbar">  <img id="imgArrow8"  src="@Url.Content("~/Content/img/middle_unfilled.png")" /></label>

        @if (Model.loanTrackerResults.loanStatus == "Funded")
        {
            <img src="@Url.Content("~/Content/img/right_filled.png")" />
        }
        else
        {
        <img src="@Url.Content("~/Content/img/right_unfilled.png")" />
        }
    </div>

这是我的Jquery代码

 $("#ProgressBar").ready(function () {
            var la = document.getElementsByClassName('Pbar');
            alert(la);
            console.log(la);
            for (i = 0; i < 4; i++) {
                @*  //la[2].attr('src', '~/Content/img/middle_filled.png');
                $("#Pbar").replaceWith('<img src = "@Url.Content("~/Content/img/middle_filled.png")" />');*@

                la[i].attr('src', '~/Content/img/middle_filled.png');                
            }
        });

Answer 1

看起来你一直试图修复很多，同时留下所有非工作代码。你似乎不再需要那么多了吗？

我不确定您要做的确切是什么，但是如果您想在用Pbar替换middle_unfilled的同时遍历每个middle_filled，请尝试以下操作：< / p>

$(document).ready(function () {
    for (var i = 0; i < 5; i++) {
        $('.Pbar').eq(i).html('<img src="/Content/img/middle_filled.png" />');               
    }
});

请注意，这样做会很快，几乎可以立即更换每张图片。

使用Pbar循环每个.each()也更容易，但我认为你想要进行一些进展功能，所以我将for留在那里。

这里与.each()：

的内容相同

$(document).ready(function () {
    $('.Pbar').each(function() {
        $(this).html('<img src="/Content/img/middle_filled.png" />');
    });               
});

这些对我来说都不是一个进度条，但希望你在这里有一些指示可以帮助你进步。

如何在jquery函数中将一个图像替换为另一个图像

1 个答案: