Question

我想在我们的网站中添加一些jQuery功能，其中一个标记将有一个点击处理程序，需要在另一个标记上执行操作，即A是B的操作触发器。不能保证关于A和B的相对结构，所以我不能依赖jQuery选择器，加上每个唯一的A只需要与它唯一的对应B相关。

在这种情况下，最好的方法是什么？

选项1：谁关心XHTML合规性，无论如何都被高估了。我们有未经训练的网络内容制作者，无论如何能够将标记注入我们的网站，因此严格的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社区有一个更好的主意...... ???

Answer 1

您可以调查jQuery Metadata plugin，它可以在class属性（或其他各种位置）中存储JSON元数据。例如：

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

Answer 2

我现在会使用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()。

Answer 3

有没有办法可以将信息存储在jQuery数据方法中？节省了标记的混乱

有关示例，请参阅此处

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

或直接文件

docs.jquery.com/Core/data#name

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

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

Answer 4

试试这个：

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

所以我决定给目标divs id“target-x”并给触发器div id“x”。这样，当您单击触发器x时，它会影响目标“target-x”。

注意到的行

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

此时你得到被点击的div的id并将其连接到“target-”并成为目标div的id。

Answer 5

然后用适当的名字和ID放入你的div隐藏输入怎么样？这样可以保持XHTML的清晰。所以你会这样使用：

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

Answer 6

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

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

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

如果触发器1隐藏或显示目标1或向下滚动它，那么如果禁用JavaScript，此方法还可以继续执行某些操作。

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

6 个答案: