0

ユーザーがクリックしたid pageContainer2を持つ別のdivの孫であるdivを選択し、インデックス値を含むアラートメッセージを表示するjqueryコードをいくつか作成しました。しかし、コードはまったく機能しているノードなので、コードを間違って書いているのか、それとも他の問題なのかを確認してください。

以下は、jquery スクリプトを使用した私の html ページ コードです。

<script>
$("div#pageContainer2 div.textLayer div").click(function () {
  // this is the dom element clicked
    var index = $("div").index(this);
    alert("index of div is = " + index);
});
</script>

<div id="pageContainer2" >
<canvas id="page2" width="741" height="959"></canvas>
<div class="textLayer">
<div>......some text here....</div>
<div>......some text here....</div>
<div>......some text here....</div>
</div>
</div>

<div id="pageContainer3" >
<canvas id="page3" width="741" height="959"></canvas>
<div class="textLayer">
<div>......some text here....</div>
<div>......some text here....</div>
<div>......some text here....</div>
</div>
</div>
4

4 に答える 4

2

いくつか問題があります。

  1. イベントを使用していないようです$(document).ready()。イベントはまだDOMにないため、要素にバインドされていません。
  2. 存在しないdivのを見つけようとしています ( .id="textLayer"class="textLayer"
  3. メソッドにセレクターを渡しています。index()このセレクターは、この特定のオブジェクトの位置を見つけたい要素を定義することになっています。要素は1 つ だけですthis(jQuery のeach()メソッドでさえ、最初から最後まで、一度に1 つの要素で動作します...)。したがって、その特定のセレクターを削除します。

したがって、修正されたコード：

$(document).ready(
    function(){
    $("div#pageContainer2 div.textLayer div").click(function () {
      // this is the dom element clicked
        var index = $("div").index();
        alert("index of div is = " + index);
    });
});

JS Fiddle のデモ。</p>

参考文献:

于 2012-04-16T12:00:18.943 に答える
1

Well, click event doesn't binded at all, since textLayer is a class not id, but you selecting by id.

Change selector to be:

$("div#pageContainer2 div.textLayer div")

It's also not clear which index you wan't to show, since what you currently use will return index of specific div tag in a whole document. In case you want an index within parent you better use something like:

var el = $(this);

var index = $('div', el.parent()).index(this);
// Or
var index = el.prevAll().length;
于 2012-04-16T11:58:26.167 に答える
1

コードを配置してhiteshtrに$(document).ready変更#textLayerすると.textLayer 、これを確認するだけで機能します。

$(document).ready(function () {
    $("#pageContainer2 > .textLayer > div").click(function () {
        // this is the dom element clicked
        var index = $("#pageContainer2 > .textLayer > div").index(this);
        alert("index of div is = " + index);
    });
});
于 2012-04-16T12:08:35.717 に答える
1 
<script type="text/javascript">
    $(function() {
        $(".textLayer > div", "#pageContainer2").click(function () {
            var index = $(this).index();
            alert("index of div is = " + index);
        });
    });
</script>

<div id="pageContainer2" >
    <canvas id="page2" width="741" height="959"></canvas>
    <div class="textLayer">
        <div>......some text here....</div>
        <div>......some text here....</div>
        <div>......some text here....</div>
    </div>
</div>

<div id="pageContainer3" >
    <canvas id="page3" width="741" height="959"></canvas>
    <div class="textLayer">
        <div>......some text here....</div>
        <div>......some text here....</div>
        <div>......some text here....</div>
    </div>
</div>​

フィドル

于 2012-04-16T12:17:13.753 に答える