代码之家 › 专栏 › 技术社区 › David Boike

关于jquery、元数据和xhtml遵从性

xhtml metadata jquery

David Boike · 技术社区 · 16 年前

我想在我们的站点中添加一些jquery功能,其中一个标记将有一个单击处理程序,需要在另一个标记上执行操作,即a是b的操作触发器。对于a和b的相对结构没有保证,因此我不能依赖jquery选择器,加上每个唯一的a需要迟到了它唯一的对应物B。

在这种情况下,对于最佳的处理方法,大家的共识是什么?

选项1: 谁在乎XHTML的遵从性,反正它被高估了。我们有未经培训的Web内容生产商能够将标记注入我们的站点,所以严格的XHTML遵从性将是一个白日梦。只需组成标签属性并使用jquery读取它们的值。

Example:
<div class="jquery-feature-trigger" actson="targetID">Trigger</div>

选项2: 使用看起来像HTML的属性,但实际上不应该用于此目的。

Example:
<div class="jquery-feature-trigger" rel="targetID">Trigger</div>

选项3: 使用像ASP.NET 4.0这样的命名空间。

Example:
<div class="jquery-feature-trigger" custom:actson="targetID">Trigger</div>

如果你想推荐选项3,我会很感激你提供一个链接,链接到需要什么才能让它工作,因为我真的不知道是否需要制作DTD或者如何链接它。

选项4: 堆栈溢出社区有更好的主意…????

6 回复 | 直到 14 年前

Greg Campbell 16 年前

你可以调查 jQuery Metadata plugin ,它可以将JSON元数据存储在 class 属性(或其他各种地方)。例子:

<div class="jquery-feature-trigger { actson: 'targetID' }">Trigger</div>

Nick Craver 14 年前

我会用 data- attributes 现在,尽管XHTML符合以下要求:

<div class="jquery-feature-trigger" data-actson="targetID">Trigger</div>

这些是一个HTML5特性,但不会在HTML4/XHTML中引起任何问题,除了在验证器中不是有效的属性之外……但不会导致实际的问题。

JQuery也 has added built-in support for these since jQuery 1.4.3 在 .data() 方法。

Nooshu 16 年前

是否有任何方法可以将信息存储在jquery数据方法中?省去了混乱的标记

有关示例,请参见此处

snipplr.com/view/9715/the-jquery-data-store/

或直接文件

docs.jquery.com/core/data名称

我已经用了几次它来存储我的元素的信息,这是一个非常有用的功能,但似乎并不广为人知!

抱歉,无法发布链接。我是新用户:(

Vincent Ramdhanie 16 年前

试试这个:

<html>
<head>


  <script src="scripts/jquery/jquery-1.2.6.min.js" type="text/javascript"></script>
  <!--Using highlight effect to illustrate-->      
  <script src="scripts/jquery/jquery-ui-highlight.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(".jquery-feature-trigger").click(function(){
           $("#target-" + $(this).attr("id")).effect("highlight", {}, 6000);

      });
});
</script>

</head>

<body>

 <div class="jquery-feature-trigger" id="1">Trigger 1</div>
 <div class="jquery-feature-trigger" id="2">Trigger 2</div>
 <div class="jquery-feature-trigger" id="3">Trigger 3</div>
 <div class="jquery-feature-target" id="target-1">Target 1</div>
 <div class="jquery-feature-target" id="target-2">Target 2</div>
 <div class="jquery-feature-target" id="target-3">Target 3</div>   

</body>
</html>

所以我决定给目标DIV一个ID“target-x”,给触发器DIV一个ID“x”。这样,当您单击触发器X时,它会影响目标“Target-X”。

注意那条线

$("#target-" + $(this).attr("id"))

此时,您将获得单击的DIV的ID,并将其连接到“target-”上,该ID将成为目标DIV的ID。

Artem Barger 16 年前

那么,将具有适当名称和ID的DIV隐藏输入放入DIV中呢?这样就可以让XHTML保持清晰。所以你会这样使用:

$( "div_name").find( "hidden_input_name").val()

Matt Ephraim 16 年前

我不知道你到底在做什么,但是是否可以让触发器成为一个锚标记,然后给目标一个ID?这样地:

<a href="#target1">Trigger 1</a>
<div id="target1">Target 1</div>

然后,您可以使用jquery通过查看href属性来查找目标的ID。

如果触发器1隐藏或显示目标1,或者向下滚动到目标1,那么如果禁用了javascript,这个方法还有一个额外的好处,那就是仍然可以做一些事情。