1

我有一个网站，其中包含多个图块，单击这些图块时，应将特定内容加载到网站上的另一个 div 中。内容位于我存储在每个磁贴的“rel”属性中的“id”引用的 php 页面上。例如：

<div id="tile" rel="1">tile 1 preview content</div>
<div id="tile" rel="2">tile 2 preview content</div>
<div id="tile" rel="3">tile 3 preview content</div>

这是我正在尝试实现的 jquery：

$('#tile').on('click', function(){
    var projectId = $(this).attr('rel');
    $('#projectLoad').load('project.php?id='+projectId);
});

谁能帮我弄清楚为什么它不起作用？谢谢！

4

3 回答 3

0

在您的示例中，所有 div 都具有相同的 id。Id 必须是唯一的。如果你给他们每个人一个唯一的 id，你的代码能工作吗？

<div id="tile1" rel="1">tile 1 preview content</div>
<div id="tile2" rel="2">tile 2 preview content</div>
<div id="tile3" rel="3">tile 3 preview content</div>

$('#tile1').on('click', function(){
    var projectId = $(this).attr('rel');
    $('#projectLoad').load('project.php?id='+projectId);
});

$('#tile2').on('click', function(){
    var projectId = $(this).attr('rel');
    $('#projectLoad').load('project.php?id='+projectId);
});

$('#tile3').on('click', function(){
    var projectId = $(this).attr('rel');
    $('#projectLoad').load('project.php?id='+projectId);
});

注意要测试这个功能，你可以试试这个 jQuery 代码：

$('#tile1').on('click', function(){ alert('hello from div 1'); });
$('#tile2').on('click', function(){ alert('hello from div 2'); });
$('#tile3').on('click', function(){ alert('hello from div 3'); });

正如 Palash 在他的回答中提到的，您可以通过使用 class 而不是 id 来避免这种重复。（类不必是唯一的。）

<div class="tile" rel="1">tile 1 preview content</div>
<div class="tile" rel="2">tile 2 preview content</div>
<div class="tile" rel="3">tile 3 preview content</div>

$('.tile').on('click', function(){
    var projectId = $(this).attr('rel');
    alert('hello from div ' + projectId);
})

这是一个显示这个简单测试的 jsFiddle - http://jsfiddle.net/RHXGS/

从评论中添加了另一个独立的测试

<!DOCTYPE html>
<html>

    <head>
        <title>Click Test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                $('.div1').on('click', function () {
                    alert('Click!');
                    $('#div2').html('content');
                });
            });
        </script>
    </head>

    <body>
        <div class="div1">click me</div>
        <div id="div2"></div>
    </body>

</html>
于 2013-04-23T18:48:09.290 回答
0

使用 class 而不是 id 像这样：

<div id="tile" rel="1">tile 1 preview content</div>
<div id="tile" rel="2">tile 2 preview content</div>
<div id="tile" rel="3">tile 3 preview content</div>

对此；

<div class="tile" rel="1">tile 1 preview content</div>
<div class="tile" rel="2">tile 2 preview content</div>
<div class="tile" rel="3">tile 3 preview content</div>

和这样的js代码：

$('.tile').on('click', function(){
    var projectId = $(this).attr('rel');
    $('#projectLoad').load('project.php?id='+projectId);
});

projectId这次您每次单击 div 时都会得到一个，并且加载将起作用。
请始终尝试在 HTML 标记中使用唯一 ID。

于 2013-04-23T18:49:25.113 回答
-1

看起来您正试图将内容加载到 ID 为“#projectload”的 div 中。您的代码中没有具有该 ID 的 div。

于 2013-04-23T18:47:58.607 回答