用jQuery创建一个onClick弹出消息

Creating a popup message onClick with jQuery

本文关键字：onClick 一个 消息 jQuery 创建      更新时间：2023-09-26

所以我想，当点击"search"时，从页面顶部出现一个小栏，上面有搜索表单，还有一个关闭按钮。单击关闭按钮的栏将弹出窗口滑回页面上方。代码如下，但我的问题是"我怎么能做得更好?现在看起来很乱!是否有一种方法可以不使用页面上隐藏的div，并在单击时运行函数时创建它?"

所以它从一个锚点开始，触发一个javascript函数使搜索栏自上而下:

<a onClick="toggleSearch()">Search</a>
function toggleSearch() {
    $('#searchoverflow').slideToggle('fast')
};

它上下切换一个隐藏的div, #searchoverflow(这是我想要摆脱的)。

<div class="notification" id="searchoverflow">
    <a href="javascript:" onClick="toggleSearch()" style="width:100%; position:absolute;height:50px;"></a>
    <div style="width:0px"><form style="width:200px" role="search" method="get" id="searchform" action="http://thenozzle.net/"><input type="text" value="" name="s" id="s"><input style="left:5px" type="submit" id="searchsubmit" value="Search"></form></div>
    <a href="javascript:" class="notificationclose" onClick="toggleSearch()">CLOSE</a>
</div><!-- searchoverflow -->

他的popupdiv解释说:通知类只是样式，它是不相关的。搜索溢出的ID是我在javascript函数中使用的，因为我在页面上有其他通知，并且需要使这个特定。弹出框内的第一个锚是我用来使搜索栏消失时，点击它的身体。在那下面，另一个锚是以防人们没有意识到整个事情会让他隐藏起来。中间的div里面只有搜索表单

提前感谢!

我正试图以任何可能的方式简化上面的代码，使其更具语义性，更少混乱，并且除非必要，我不需要在html中使用隐藏的弹出式div。

我会说这正是你想要做的。

我认为你的代码是非常语义。div#searchOverflow可能会被重命名为div#searchbox，我将有点击事件得到编程绑定，但div绝对应该在DOM中。

编辑，回答你的问题:

我的见解来自于设计模式中的模型-视图-控制概念[1]。在Web开发中，HTML是模型。它是你正在处理的东西，页面的物理部分。CSS就是视图。CSS描述了您希望如何显示该模型默认-块，颜色，字体等。Javascript是控制器。它是根据用户与网页的交互操作模型和视图的程序代码。

我们将这些关注点分离到不同的文件中，这样我们就可以快速更改每个部分的工作方式。通过将所有HTML放在一个文件中，我们不需要在更多的代码中寻找需要编辑的内容。假设您希望更改表单的目标，因为您在后端添加了一个新的搜索模块。没有看过你代码的人会先看。htm或。js文件吗?我会在。htm文件中查找，因为这是表单标签应该的位置(在我看来)。

然后，我将onclick绑定移动到JS。目前，你有它们在html与onclick="toggleSearch()"。同样的原因——如果我是第一次看你的代码，我将首先在JS中寻找任何程序性的东西。至于怎么做:

$(function(){
    $("#searchoverflow > a").click(
        toggleSearch
    ); //'#searchoverflow > a' click handler
});  //doc ready

包装$(function(){})是一个文档就绪处理程序-只有当页面上的所有内容都准备好时才会调用它。$("#searchoverflow > a")只选择a锚点，它们是包含div的直接子锚点。.click(_function_)绑定click事件，因此当任何匹配该选择器的东西被单击时，函数将运行。

[1] http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

相关文章：