Question

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

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

$（ '＃start_btn'）。点击（...）

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

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

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

Answer 1

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

我认为这取决于这些事情究竟是做什么的，以及一切都有多大和复杂。

Answer 2

每个文档的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();

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

我在这里展示的是JavaScript应用程序框架的简单基础。如果这是您编写应用程序的样式，您可能需要考虑一些现成的框架，如AngularJS（http://angularjs.org/），它已经为您提供了一个非常好的框架来处理这种可嵌入的JavaScript应用程序。< / p>

Answer 3

您可以命名控件。

如果您发布了页面的代码，我可以更新此答案，但这可能是它的样子

<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()

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