Axxiiim Ответов: 1

Функция изменения события в JS не работает должным образом ?

I am trying to show a message on change event through JS. first time it works but for the second time it doesn't appear . I checked it in debugging mode Change event occurs but the message doesn't appear.


Что я уже пробовал:

Мой код в HTML:

<div class="row">
    <div class="col-md-8 offset-sm-1 showMsg">
        <label id="msg"></label>
    </div>
</div>

<div class="col-lg-12 col-xl-8 col-md-8  col-sm-8 col-xs-12">
                            @Html.DropDownListFor(x => x.rat_starting, list, "--Select List--", new { @class = "form-control", @id = "rat_starting" })
                            @Html.ValidationMessageFor(model => model.rat_starting, "", new { @class = "text-danger" })
                        </div>


<div class="col-lg-12 col-xl-8 col-md-8  col-sm-8 col-xs-12">
                            @Html.DropDownListFor(x => x.rat_ending, list, "--Select List--", new { @class = "form-control", @id = "rat_ending" })
                            @Html.ValidationMessageFor(model => model.rat_ending, "", new { @class = "text-danger" })
                        </div>


Мой код в JS:

$('#rat_ending').on('change', function () {
    var start = $('#rat_starting').val();
    var end = $('#rat_ending').val();//data("kendoDropDownList").value();
    if (end <= start) {
        Alertmessage();
    }
});

function Alertmessage()
{
    $('.showMsg').hide();
    $('#msg').empty();
    $('#msg').html('End Index Must be greater than Start Index.');
    $("#msg").css("color", "red");
    $('.showMsg').show();
    $('#msg').fadeOut(5000);
}

F-ES Sitecore

Где находится элемент с идентификатором "msg"?

Axxiiim

код обновлен пожалуйста посмотрите

1 Ответов

Рейтинг:
6

F-ES Sitecore

Когда msg закончит анимацию затухания, она будет скрыта, и в вашем коде нет ничего, что могло бы показать ее снова, поэтому она остается скрытой. "затухание" просто анимируется из текущей видимости в не показанную, но если она уже не показана, то ей нечего делать, она остается не показанной.

Приведенное ниже обновление останавливает анимацию, если она в данный момент запущена (stop), сбрасывает непрозрачность (fadeIn), а затем снова запускает затухание.

function Alertmessage()
{
    $('.showMsg').hide();
    $('#msg').empty();
    $('#msg').html('End Index Must be greater than Start Index.');
    $("#msg").css("color", "red");
    $('#msg').stop();
    $('#msg').fadeIn();
    $('.showMsg').show();
    $('#msg').fadeOut(5000);
}