关于 jQuery、元数据和 XHTML 合规性

发布于 2024-07-21 16:08:26 字数 932 浏览 7 评论 0原文

我想向我们的网站添加一些 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： Stack Overflow 社区有更好的主意......？？？

原文

I want to add some jQuery functionality to our sites where one piece of markup will have a click handler which will need to cause action to happen on another piece of markup, i.e. A is a trigger for action from B. There's no guarantee about the relative structure of A and B, so I can't rely on a jQuery selector, plus each unique A will need to relate only to its unique counterpart B.

What is the general consensus on the best way to proceed in such a circumstance?

Option 1: Who cares about XHTML compliance, it's overrated anyway. We have untrained web content producers able to inject markup into our site anyway so strict XHTML compliance would be a pipe dream. Just make up tag attributes and read their values with jQuery.

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

Option 2: Use attributes that look like HTML, but shouldn't really be used for that purpose.

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

Option 3: Use namespaces like ASP.NET 4.0 is setting out to do.

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

If you want to recommend Option 3, I would appreciate a link to what is required to get this to work as I really have no idea if a DTD has to be made or how to link it in.

Option 4: The Stack Overflow community has a better idea...???

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

内心荒芜 2024-07-28 16:08:26

您可以研究jQuery 元数据插件，它可以在类中存储JSON元数据属性（或其他各个地方）。例子：

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

You could investigate the jQuery Metadata plugin, which can store JSON metadata in the class attribute (or various other places). Example:

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

回复收藏 0 原文

雪若未夕 2024-07-28 16:08:26

我会使用 data- 属性现在，尽管符合 XHTML 规范，如下所示：

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

这些是 HTML5 功能，但除了在验证器中不是有效属性之外，不会在 HTML4/XHTML 中引起任何问题...但不会因此产生任何实际问题。

jQuery 还自 jQuery 1.4.3 以来添加了对这些的内置支持< /a> 在 .data() 方法中。

I would use data- attributes for this now, in spite of XHTML compliance, like this:

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

These are an HTML5 feature, but don't cause any issues in HTML4/XHTML other than not being valid attributes in the validator...but no actual problems result from this.

jQuery also has added built-in support for these since jQuery 1.4.3 in the .data() methods.

回复收藏 0 原文

坦然微笑 2024-07-28 16:08:26

有什么方法可以将信息存储在 jQuery 数据方法中吗？节省混乱的标记

有关示例，请参见此处

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

或直接文档

docs.jquery.com/Core/data#name

我已经使用过它几次存储有关我的元素的信息，非常有用的功能，但似乎没有被广泛了解！

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

回复收藏 0 原文

喜爱皱眉﹌ 2024-07-28 16:08:26

试试这个：

<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-”，这将成为目标 div 的 id。

Try this:

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

So I have decided to give the target divs the id "target-x" and give the trigger divs the id "x". This way, when you click on trigger x it affects target "target-x".

Notice the line that goes

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

its at that point that you get the id of the clicked div and concatenate it onto "target-" and that becomes the id of the target div.

回复收藏 0 原文

你对谁都笑 2024-07-28 16:08:26

那么如何将具有适当名称和 ID 的隐藏输入放入 div 中呢？这样您就可以保持 XHTML 清晰。
所以你会这样使用：

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

And what about putting inside your div hidden inputs with appropriate names and ids? This way you keep XHTML clear.
So you will use like that:

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

回复收藏 0 原文

天气好吗我好吗 2024-07-28 16:08:26

我不知道你到底在做什么，但是是否可以使触发器成为锚标记，然后给目标一个id？像这样：

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

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

如果触发器 1 隐藏或显示目标 1 或向下滚动到它，则此方法将具有额外的好处，即在禁用 JavaScript 的情况下仍然可以执行某些操作。

I don't know exactly what you're doing, but would it possible to make the trigger be an anchor tag and then give the target an id? Like this:

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

Then you could use jQuery to find the id of the target by looking at the href attribute.

If trigger 1 hides or shows target 1 or scrolls down to it, this method would have the added benefit of still doing something if JavaScript was disabled.

回复收藏 0 原文

~没有更多了~