根据类名加载页面

Question

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

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

Answer 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 混合。

Answer 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 可能会被恶意用户重写）。