1

我想构建一个可以在单个页面上有多个实例的 jQuery 应用程序。

但是，我遇到了一个实例从其他实例接收事件的问题。例如，如果我有以下事件：

$('#start_btn').click(...)

如果单击页面上的任何#start_btn，则所有实例都会启动。

那么，如何设计代码以使每个实例只与自己的 HTML 代码中的元素交互？

更新 - 如果您在这里遇到相同类型的问题；我发现这是错误的方法。jQuery插件设计是最好的方法。

http://learn.jquery.com/plugins/

4

3 回答 3

2

你永远不应该在同一页面上有两个具有相同 ID 的控件。如果您想要完全分离的页面，您可能希望将每个应用程序放在自己的 IFRAME 中，并具有自己的完整上下文，然后它们将被完全隔离。

我想这取决于这些东西究竟做了什么，以及一切有多大和有多复杂。

于 2013-07-18T22:01:52.243 回答
1

每个文档的 ID 都是唯一的。不要使用它们。相反，使用通用类属性来识别这些实例中的单个应用程序和类（再次）也指向应用程序的特定部分。

示例 HTML：

<div class="app">
  <a class="start-button" href="#">button1</a>
</div>
<div class="app">
  <a class="start-button" href="#">button2</a>
</div>

假设上述情况，您现在可以确定单击开始按钮的应用程序：

$('.start-button').click(function(event) {
    var app = $(event.target).closest('.app');
    // Do stuff
});

现在，如果你想在那个特定的应用程序中做一些事情，你可以使用app或其他一些顶级引用来将更改只保留在那个应用程序中。

例如，单击时隐藏按钮：

$(app, '.start-button').hide();

有关完整运行示例，请参阅此 Fiddle：http: //jsfiddle.net/8Xtue/2/

我在这里介绍的是 JavaScript 应用程序框架的简单基础。如果这是您编写应用程序的风格，您可能需要考虑一些现成的框架，例如 AngularJS ( http://angularjs.org/ )，它已经为您提供了一个非常周到的框架来处理这种可嵌入的 JavaScript应用程序。

于 2013-07-18T22:01:37.457 回答
0

您可以命名您的控件。

如果您发布页面的代码，我可以更新此答案，但这可能看起来像

<div id="page1">
  <button class=".startBtn">
</div>
<div id="page2">
  <button class=".startBtn">
</div>

然后在jquery中

$("#page1 > .startBtn").click()
$("#page2 > .startBtn").click()

或者，如果他们不是直接父母子女

$(".startBtn", "#page1").click()
$(".startBtn", "#page2").click()

这里有一些文档：http: //api.jquery.com/child-selector/

注意：我将 startBtn 更改为类而不是 ID，因为我们通常希望避免在 DOM 中出现重复的 ID。

于 2013-07-18T22:29:27.660 回答