新手:如何使用jQuery在我的案例中隐藏和显示?

时间:2011-05-11 08:42:14

标签: javascript jquery jquery-ui javascript-events jquery-selectors

我是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”区域?如何实现这一切?

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

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

有很多方法可以显示新内容,例如append(),以防您不想覆盖<div id="content" />内的所有html代码,或使用这些功能如果<img />已经存在,则toggle()show()hide()。 此外,您还必须考虑在change()函数中知道选择了哪个选项并采取相应措施。