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

I am designing a progress bar which is having 9 images. Initially those should be unfilled. Based on the status i need to replace them with the filled images(I have both filled and unfilled images for progress bar). Can anyone help me with my problem.

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

Here is my code in view which displays unfilled images:

这是我在视图中显示未填充图像的代码:

<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>

Here is my Jquery code

这是我的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');                
            }
        });

1 个解决方案

#1

Looks like you have been trying to fix a lot while leaving all the non working code around. It seems to be quite a lot you don't need there anymore?

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

I'm not sure exactly what it is you are trying to do, but if you want to loop through each Pbar while replacing the middle_unfilled with middle_filled, try this:

我不确定你想要做什么,但是如果你想在用middle_filled替换middle_unfilled的同时遍历每个Pbar,试试这个:

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

Note that this will go so fast that every image will be replaced almost instantly.

请注意,这将非常快,以至于每个图像几乎都会立即被替换。

It's also much easier to loop through every Pbar with .each(), but I take it you want to make some progress function so I left the for in there.

使用.each()循环遍历每个Pbar也更容易,但我认为你想要进行一些进度功能,所以我把它留在那里。

Here you have the same thing with .each():

在这里,你对.each()有同样的看法:

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

Neither of these looks like a progress bar to me, but hopefully you have some pointers in here to help you progress.

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

#1