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

Posted

技术标签:

【中文标题】如何在我的情况下使用 jQuery 隐藏和显示?【英文标题】:How to hide and show in my case using 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”区域?如何实现这一切?

【问题讨论】:

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

【讨论】:

以上是关于如何在我的情况下使用 jQuery 隐藏和显示?的主要内容,如果未能解决你的问题,请参考以下文章

如何创建一个jquery li rotator

如何在 MVC 4 中使用 jquery 验证表单的隐藏输入字段?

使用带有添加和删除元素条件的 jQuery 克隆表单

如何在不单击后退按钮的情况下隐藏键盘[重复]

如何使用jQuery在三个或更多条件下显示和隐藏元素?

Jquery显示/隐藏根本不在移动设备上工作