У меня есть следующий скрипт, который скрывает / показывает 2 div в зависимости от содержимого значения выбранного идентификатора при его изменении. Это отлично работает.

<script type="text/javascript">
        $(function () {
            $("#ue_package").change(function () {
                if ($(this).val() == "Featured") {
                    $(".image_container").hide();
                    $(".image_container_featured").show();              
                } else if ($(this).val() == "Standard") { 
                    $(".image_container").show();
                    $(".image_container_featured").hide();              
                }
            });
        });
    </script>   

То, что я пытаюсь сделать, это выполнить то же самое действие, за исключением не только ИЗМЕНЕНИЯ, но и загрузки страницы. Поэтому, когда я вхожу на страницу, если FEATURED является значением, правильный DIV уже будет скрыт и показан.

Я пробовал следующее, но это не сработало.

  <script type="text/javascript">
$( document ).ready(function() {
                $("#ue_package").change(function () {
                    if ($(this).val() == "Featured") {
                        $(".image_container").hide();
                        $(".image_container_featured").show();              
                    } else if ($(this).val() == "Standard") { 
                        $(".image_container").show();
                        $(".image_container_featured").hide();              
                    }
                });
            });
        </script>   
1
Maria Nolorbe 17 Дек 2015 в 09:39

5 ответов

Лучший ответ

Определите переключение как функцию. Обратите внимание, замените $ (this) селектором идентификатора элемента и вызовите эту функцию в onchange и onload body следующим образом:

$( document ).ready(function() {
   showHide();
   $("#ue_package").change(function () {
        showHide();
   });
});


function showHide() {
    if ($('#ue_package').val() == "Featured") {
        $(".image_container").hide();
        $(".image_container_featured").show();              
    } else if ($('#ue_package').val() == "Standard") { 
        $(".image_container").show();
        $(".image_container_featured").hide();              
    }
}
1
Sanjay Kumar N S 17 Дек 2015 в 07:33

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

Так что есть два варианта один:

<script type="text/javascript">
$( document ).ready(function() {
 showHidediv();
            $("#ue_package").change(function () {
               showHidediv();
        });

function showHidediv()
     {
 if ($("#ue_package").val() == "Featured") {
                    $(".image_container").hide();
                    $(".image_container_featured").show();              
                } else if ($("#ue_package").val() == "Standard") { 
                    $(".image_container").show();
                    $(".image_container_featured").hide();              
                }
 }
    </script>   

Второй способ:

$( document ).ready(function() {
       $("#ue_package").change();


 $("#ue_package").change(function () {
                if ($(this).val() == "Featured") {
                    $(".image_container").hide();
                    $(".image_container_featured").show();              
                } else if ($(this).val() == "Standard") { 
                    $(".image_container").show();
                    $(".image_container_featured").hide();              
                }
            });
 });

Подробнее об изменениях ()

0
Neeraj Sharma 17 Дек 2015 в 06:51

Я хотел бы предложить это, так как я немного изменил логику, я помещаю изображения в div и я играю с активным классом.

в javascript:

$( document ).ready(function() {
            if ($("#ue_package").val() == "Featured") {
                $('.container:eq(0)').addClass('active');
            $('.container:eq(1)').removeClass('active');
        } else if ($("#ue_package").val() == "Standard") { 
                $('.container:eq(0)').removeClass('active');
                    $('.container:eq(1)').addClass('active');
        }
}

в css

.container{
  display:none
}

.container.active{
  display:block;
}

в html:

<div class="container">
  <img class='image_container' src="something"/>1
</div>

<div class="container">
  <img class='image_container' src="something"/>2
</div>

Надежда помогает удаче

0
Theo Itzaris 17 Дек 2015 в 06:56

Просто вызовите / активируйте функцию change в функции обработчика событий document.ready после привязки события change к тому же текстовому полю.

$("#ue_package").change();
0
gurvinder372 17 Дек 2015 в 06:43
<script type="text/javascript">
$( document ).ready(function() {
    if ($("#ue_package").val() == "Featured") {
            $(".image_container").hide();
            $(".image_container_featured").show();              
        } else if ($("#ue_package").val() == "Standard") { 
                $(".image_container").show();
                $(".image_container_featured").hide();              
        }
});
</script> 
0
Matt 17 Дек 2015 в 06:46