如何使用 jQuery 在我的案例中隐藏和显示？

发布于 2024-11-06 13:16:08 字数 855 浏览 0 评论 0原文

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

这是隐藏选择字段并在同一“内容”区域中显示图像。

如何在 jQuery 中做到这一点？

我尝试过：

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

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

原文

I am new to 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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

傾城如夢未必闌珊 2024-11-13 13:16:08

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

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

回复收藏 0 原文

人心善变 2024-11-13 13:16:08

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

不过，显示新内容的方法有很多种，例如 append()< /a> 例如，如果您不想覆盖

内的所有 html 代码，或使用函数 toggle() 或 show( ) 和 hide() 如果已经那里。
此外，您还必须考虑了解 change() 函数中选择了哪个选项并采取相应的行动。

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.