0

我敢肯定，你们中的很多人都曾或多次遇到过这样的困境：

我有一个包含多个块级和内联级元素的块级 HTML 元素，例如

<div id="ajax">
   <h2>Something</h2>
   <div class="icon"></div>
   <div class="clear"></div>
   <div class="somethingelse"><h3>blah</h3></div>
</div>

我只是想将 jQuery ajax() 事件附加到单击#ajax（顶级元素），但我需要将一些参数传递给服务器端脚本。

我看到的一种可能的方法是简单地替换div#ajax为a#ajax，这将允许我添加类似的内容href="param=value&this=that"，但这会使页面无效：<div>内联元素 ( ) 内不能有任何块级元素 ( <a>)。

另一种可能的方法是向 中添加一个rel属性div#ajax，这也意味着忽略 XHTML 验证。

我不想将内联onclick事件添加到 div 中，这有点太过分了......此外，将所有子项div#ajax变为 eg<span>将是一个主要的皮塔饼。

你会怎么处理这个？

谢谢！

4

1 回答 1

2

在保持 XHTML 有效性或至少在所有浏览器中保持完整功能的同时，有几种方法可以解决这个问题：

第一个选项，将参数直接放在JavaScript中的某个地方，这是最简单的。

其次，如果你不能在脚本中做到这一点，你可以使用锚点，但在里面，而不是包装它，像这样：

<div id="ajax">
   <h2>Something</h2>
   <div class="icon"></div>
   <div class="clear"></div>
   <div class="somethingelse"><h3>blah</h3></div>
   <a class="params" href="page.htm?param=value&this=that"></a>
</div>

CSS隐藏它：

.params { display: none; }

和 jQuery 使用它：

$("#ajax").click(function() {
   $.ajax({
     url: $(this).find(".params").attr("href");
     success: function() {
       //do something
     }
   });
});

第三，使用HTML5 数据属性，这会破坏严格的 XHTML 有效性，但未来的路很好，它不会在当前浏览器中造成任何问题。

最后一个选项（我能想到的），使用jQuery 元数据插件或存储你想要的。

于 2010-06-29T01:41:57.027 回答