1

クリックすると、特定のコンテンツをサイトの別の div にロードするタイルがいくつかある Web サイトがあります。コンテンツは、各タイルの「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 が彼の回答で述べたように、id の代わりに class を使用することで、この重複を避けることができます。(クラスは一意である必要はありません。)

<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

次のように id の代わりに class を使用します。

<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

「#projectload」の ID を持つ div にコンテンツをロードしようとしているようです。その ID を持つコードに div はありません。

于 2013-04-23T18:47:58.607 に答える