如何在我的情况下使用 jQuery 隐藏和显示？答案

【问题标题】：How to hide and show in my case using jQuery?如何在我的情况下使用 jQuery 隐藏和显示？
【发布时间】：2011-08-23 02:54:18
【问题描述】：

我是 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”消失（隐藏），并且图像将显示在“@987654324 @“ 区域。

隐藏选择字段并在同一“content”区域显示图像。

如何在 jQuery 中做到这一点？

我试过了：

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

但是，在哪里定义“my-list”和image在同一个“content”区域？如何实现这一切？

【问题讨论】：

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

【解决方案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()，如果您不想覆盖 <div id="content" /> 中的所有 html 代码，或者使用函数 toggle() 或show() 和 hide() 如果 <img /> 已经存在。此外，您还必须考虑知道change()函数中选择了哪个选项并采取相应措施。

【讨论】：