Как заменить одно изображение другим в функции jquery

0

Я проектирую индикатор выполнения, который имеет 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');                
            }
        });
  • 2
    $("#Pbar") выбирает id="Pbar" . Вы, вероятно, должны использовать $(".Pbar") который выбирает class="Pbar"
  • 0
    @DanielLisi: да, просто нужно заменить незаполненные заполненными.
Показать ещё 1 комментарий
Теги:
asp.net-mvc

1 ответ

0

Похоже, вы пытались исправить много, оставив весь нерабочий код. Кажется, вам уже много чего не нужно?

Я не уверен, что именно вы пытаетесь сделать, но если вы хотите Pbar каждый Pbar при замене middle_unfilled на middle_filled, попробуйте следующее:

$(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" />');
    });               
});

Ни один из них не выглядит как индикатор прогресса, но, надеюсь, у вас есть несколько указателей здесь, чтобы помочь вам продвинуться вперед.

Поделиться
  • 0
    Мне нужно заменить изображения на основе кода состояния. Предположим, что это 5, тогда мне нужно заменить незаполненный заполненным только для тех 5 изображений. остальные из них должны быть только незаполненными. Вот почему я использую цикл for.
  • 0
    Я уверен, что это не имеет никакого значения. Изображения все еще не заполнены. Можете ли вы сказать мне, нужно ли мне использовать метку в теге DIV?
Показать ещё 8 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню