5

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

4

6 回答 6

8

您可以研究jQuery Metadata plugin，它可以将 JSON 元数据存储在class属性（或其他各种地方）中。例子：

<div class="jquery-feature-trigger { actson: 'targetID' }">Trigger</div>
于 2009-05-19T16:27:58.967 回答
6

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

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

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

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

于 2010-10-26T01:34:03.547 回答
1

有什么方法可以将信息存储在 jQuery 数据方法中？避免标记混乱

有关示例，请参见此处

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

或直接文件

docs.jquery.com/Core/data#name

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

抱歉不能发链接我是新用户:(

于 2009-05-19T16:21:50.330 回答
1

试试这个：

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

于 2009-05-19T16:23:29.237 回答
0

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

$( "div_name").find( "hidden_input_name").val()
于 2009-05-19T16:25:20.077 回答
0

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

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

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

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

于 2009-05-19T16:41:38.660 回答