Newbie: how to hide and show in my case using jQue

2019-08-21 20:12发布

问题:

I am a newbie in jQuery. I have a index.html page,

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

I would like the feature that when page loaded, "content" area shows a list:

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

when user select a car from the list option, the list "my-list" disappear(hide), and an image will be shown in the "content" area.

That's hide the selection filed and show the image in the same "content" area.

How to do that in jQuery??

I tried:

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

But, where to define "my-list" and the image are in the same "content" area? How to implement this all?

回答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 ... />');
)};

There are a number of ways, though, to show new content, with append() for example, in case you don't want to overwrite all the html code inside <div id="content" />, or using the functions toggle() or show() and hide() if the <img /> is already there. Also you will have to have in consideration knowing which option was selected inside the change()function and act accordingly.