Блог

Главная - Вопросы по программированию - Как скрыть и показать в моем случае с помощью jQuery?

Как скрыть и показать в моем случае с помощью jQuery?

#javascript #jquery #jquery-ui #jquery-selectors #jquery-events

#javascript #jquery #jquery-пользовательский интерфейс #jquery-селекторы #jquery-события

Вопрос:

Я новичок в jQuery. У меня есть index.html страница,

 <body>
  <div id="content">
</body>

Я хотел бы, чтобы при загрузке страницы в области «содержимое» отображался список:

 <div id="my-list">
    <select id="carlist" size="10">
          <option>BMW</option>
          <option>TOYOTA</option>
          <option>SKODA</option>
    </select>
</div>

когда пользователь выбирает автомобиль из опции списка, список « my-list » исчезает (скрывается), и в области «» будет показано content изображение.

Это скрывает выделенный файл и показывает изображение в той же « content » области.

Как это сделать в jQuery?

Я пытался:

 var mylist=$('#my-list');
mylist.change(function(){
    mylist.hide()
    SOMEIMAGE.show()
}

Но, где определить « my-list » и image находятся в одной и той же « content » области? Как все это реализовать?

Ответ №1:

 var mylist=$('#carlist');
mylist.change(function(){
    mylist.hide();
    var container = mylist.parent();
    container.find('img').remove();
    container.append('<img src="x.jpg" />');
}

Ответ №2:

 mylist = $('#my-list');
mylist.change(function(){
    mylist.hide();
    container = $('#content');
    container.html('<img ... />');
)};

Однако есть несколько способов показать новое содержимое, с append() например, если вы не хотите перезаписывать весь html-код внутри <div id="content" /> , или с помощью функций toggle() или show() и hide() , если <img /> это уже есть.
Также вам нужно будет учитывать, зная, какая опция была выбрана внутри change() функции, и действовать соответствующим образом.