根据类名加载页面答案

【问题标题】：load page according to class names根据类名加载页面
【发布时间】：2010-11-11 21:18:54
【问题描述】：

我的页面上有这样的代码：

<div class="item item_wall id1"></div>
<div class="item item_wall id2"></div>
<div class="item item_wall id3"></div>
<div class="item item_wall id4"></div>
<div class="item item_wall id5"></div>

我想要 jquery 中的一些东西，这样当单击具有“item”类的 div 时，它将从页面加载另一个 div，页面的文件名将取决于单击的 div。最好我希望它加载：

something.php?type=item_wall&id=id1

为了将来参考，这是我最终得到的：

<div id="itemstable" class="item_love">
    <div class="id1"></div>
    <div class="id2"></div>
    <div class="id3"></div>
    <div class="id4"></div>
    <div class="id5"></div>
    <div class="id6"></div>
</div>

jQuery:

<script>
$("#itemstable div").click(function(){
    var url = "something.php?type=" + $(this).parent().attr("class") + "id=" + $(this).attr("class");
    alert(url);
}); 
</script>

【问题讨论】：

以这种方式使用类属性有点傻。为什么不使用其他属性来保存值？甚至是自定义属性。
我使用了类属性，因为这些类中的每一个都应用了一些 css。 “item”设置宽度/高度，“item_wall”设置背景图片，“id*”设置背景位置。
这两个答案在技术上都不是公认的答案，所以我不会接受一个，但他们都帮助了我。谢谢阿德里安·戈东

标签： jquery class-names

【解决方案1】：

对于 XHTML 有效文档，最简单的方法是在主 DIV 下添加不可见的子 DIV。例如：

<div class="item">
  <div class="variable type">item_wall</div>
  <div class="variable id">1</div>
</div>

您可以使用 .find() 找到“自定义属性”。例如：

$(".item").click(function() {
    var type = $(this).find(".type").val();
    var url = "something.php?type=" + type;
    windows.location = url;
});

一点意见：应避免将数据与 UI 混合。

【讨论】：

感谢您提供的所有帮助/代码，我想我会使用您的其他解决方案，只需包含类型和 id 两次（一次在课堂上，其他时间作为自定义属性）。我试图让我的代码尽可能小，这就是我不选择这个选项的原因。我实际上只是想将“item”和“item_wall”类应用到父 div，在我的代码中节省大量空间，然后我将使用 css 来设置子 div 的宽度。以前从未尝试过，但我认为它会起作用......

【解决方案2】：

呼应 Spencer Ruport 的回答，您可以在使用 jQuery 使用除类以外的自定义属性时更轻松地完成此操作。

例如，您的 DIV 可能如下所示：

<div class="item" type="item_wall" id="1"></div>

您可以像下面这样轻松创建 jQuery 选择器和事件：

$(".item").click(function() {
    var url = "something.php?type=" + $(this).attr("type");
    windows.location = url;
});

当然，不要忘记检查有效性，永远不要相信用户输入（您的 HTML 可能会被恶意用户重写）。

【讨论】：

如果我添加自定义属性，那是不是意味着我的代码无法验证？你也不能对它们应用 css，所以我需要重复 type 和 id，所有 3 个类都应用了一些 css。 item = 宽度和高度，type = 用作背景的文件，id = 背景位置，因此它使用正确的图像。
如果您坚持使用有效的 XHTML 文档，那么您可以坚持您的类声明，并使用字符串操作来解析您的“变量”。或者，您可以使用 display:none 创建多个子 DIV/SPAN，但包含值（ala XML）。无论哪种方式，都需要做更多的工作。
aah 是的，我想我不需要我的代码来验证，只是觉得它会很好...... css 问题呢？有什么方法可以在不重复类型和 id 的情况下做到这一点？
查看我的其他答案。不过，不要将数据与 UI 混合。