0

在我们的项目中，目前我有以下问题。我必须将一些点击绑定到锁定元素列表，如下所示：

  <ul>
    <li class="listeelement" id="load-content-id-1"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-2"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-3"><div>listcontent</div></li>
    <li class="listeelement" id="load-content-id-4"><div>listcontent</div></li>
  </ul>

点击.listelement应该向具有特定参数的特定操作发送请求，例如 element-id 和类似的东西 (-> module/action?id=1&something=something)。

我想编写一个通用请求类来发送请求并处理与点击和请求有关的所有事情，我不确定这是否是将点击不显眼地绑定到类.listelement并保存的好方法我的标记中某处的操作和参数信息，或者如果通过onclick="sendRequest(action, params)".

在我看来，obtrusive-onclick-solution 似乎要容易得多，但我不确定它是否也是一个好的解决方案。

如果有人可以对此发表意见，我会很高兴。

4

2 回答 2

1

我建议使用体面的标记而不是依赖onclick属性。最大的原因是它可以让你的标记保持干净，如果你有很多这些元素，它还可以大大减少网络上的字节大小。

另外，我不会在 id 属性中编码值，因为您现在可以合法地使用 HTML5 数据属性，并且它们也向后兼容。

<ul id="container">
    <li class=".." data-action="login" data-id="1" data-params="a=b">..</li>
    <li class=".." data-action="logout" data-id="2" data-params="c=d">..</li>
    ...
</ul>

一旦你在标记中有数据，设置点击处理程序并将其与Request类连接起来就相当简单了。

var list = document.getElementById("container");
var items = list.getElementsByTagName("li");

for(var i = 0; i < items.length; i++) {
    items[i].onclick = (function(element) {
        return function() {
            var action = element.getAttribute('data-action');
            var id = element.getAttribute('data-id');
            var params = element.getAttribute('data-params');

            sendRequest(action, params);
        };
    })(items[i]);
}

如果您有很多元素，<li>那么事件委托可能是一种更好的方法，而不是为每个元素添加一个处理程序。此外，考虑使用 DOM 事件注册模型来添加处理程序而不是onclick属性，因为这将选项限制为最多一个处理程序。

于 2010-07-13T09:53:15.837 回答
0

这是一个选项。改为创建li 的链接<a>，并将控制器/操作作为查询字符串（如果您的后端可以解析漂亮的 URL，则使用斜线分隔键值对）。假设您正在执行 AJAX 调用，请使用一些简单的 javascript 在页面加载时挂钩<a>带有给定类的所有元素的单击事件（您可以选择适当的内容，例如 .ajax-link）。在处理程序中，阻止默认操作，以便浏览器不会导航到 href，然后提取 href，解析它，并用它配置一个 xhr，然后离开。不确定您是否使用像 jQuery 这样的库，但这会减轻负载和代码交易。

如果需要，可以<a>将现有的<li>.

这可能会有所帮助：绑定/单击上的 JQuery 参数注入与带有参数的嵌入式单击处理程序

于 2012-05-17T18:59:51.507 回答