Question

所以我想，当点击“搜索”时，会在页面顶部显示一个小条形图，其中包含搜索表单和关闭按钮。单击该栏以关闭按钮可将弹出窗口滑回页面上方。他的代码在下面，但是我的问题是“我怎么能更好地做到这一点？它目前看起来非常混乱！有没有办法不在页面上使用隐藏的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 -->

他弹出的div解释说：通知类只是它的样式，它没有关联。搜索溢出的ID是我在javascript函数中使用的，因为我在页面上有其他通知，并且需要使这个特定。弹出窗口中的第一个锚点是我用来使搜索栏在单击其主体时消失的内容。在那之下，另一个锚只是案例人们没有意识到整个事情会使隐藏。中间div只有搜索表单。

提前致谢！

tl; dr我试图以任何可能的方式简化上面的代码，它更加语义化，不那么混乱，除非必要，否则我不必在html中使用隐藏的popup div。

Answer 1

我会回答说这正是你想做的事情。

我认为你拥有的代码非常具有语义性。 div#searchOverflow可能会重命名为div#searchbox，我会以编程方式绑定点击事件，但div绝对应该在DOM中。

编辑，问题：

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

我们将这些问题分开到不同的文件中，以便我们可以快速更改每个部分的工作方式。通过将所有HTML放在一个文件中，我们不需要寻找更多代码来查找需要编辑的内容。假设您要更改表单的目标，因为您在后端添加了新的搜索模块。哪个从未看过您的代码的人首先查看.htm或.js文件？我会查看.htm文件，因为那里的表单标签应该（在我看来）。

然后，我会将onclick绑定移动到JS。目前，您在onclick="toggleSearch()"的html中拥有它们。同样的原因 - 如果我不熟悉您的代码，我会首先想要查看JS中的任何程序设计。至于如何做到这一点：

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

包装$(function(){})是一个文档就绪处理程序 - 只有在页面上的所有内容都准备好后才会调用它。 $("#searchoverflow > a")只选择包含div的直接子节点的a个nchors。 .click(_function_)绑定click事件，以便当点击与该选择器匹配的任何内容时， function 就会运行。

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

使用jQuery在onClick上创建弹出消息

1 个答案: