0

要素のすぐ下にあるテーブルセルでマウスクリックが発生しているかどうかを判断しようとすると、問題が発生しますid=#blankElement.

イベントハンドラは、指定された要素の右または左にあるセルをクリックすると正常に機能しますが、他のセルがクリックされると、「セルが上にあります」というアラートが表示されます..

$(function () {
    var $tbl = $('<table border="1">').attr('id', 'grid');
    var $tbody = $('<tbody>').attr('id', 'tableBody');

    for (var i = 0; i < $("#numOfPieces").val(); i++) {

        var trow = $("<tr>"); // New row

        for (var j = 0; j < $("#numOfPieces").val(); j++) {
            $("<td>")
                    .text('Row : ' + i + ', Col: ' + j)
                    .appendTo(trow);
        }

        trow.appendTo($tbody);
    }

    $tbl.append($tbody);
    $('table').remove();
    $('body').append($tbl);
    $('#grid tr:first td:last').prev().text("");
    $('#grid tr:first td:last').prev().attr('id', 'blankElement');
});

// Event handler for clicking table cells
$('body').on('click', '#grid td', function(e) {

    if ($(this).closest('td').next("#blankElement").length){
        alert('Cell to the right');

    }else if ($(this).closest('td').prev("#blankElement").length){
        alert('Cell to the left');

    }else if ($(this).parent().next().children().eq($(this).index())){
        alert('Cell is above');
    }
});
4

1 に答える 1

1

ほら、皆さん、フィドル：http://jsfiddle.net/yQk28/23/

あなたのコードには多くの問題があります：

  1. eq() はセレクターのように機能し、要素の配列を返します。何も一致しない場合、[] が返されますが、それでも true と評価されます。

  2. 探している要素だけでなく、すべての子を選択しています（children（）は$（）として機能します-追加のセレクターを渡すことができ、子をフィルタリングします）

フィドルを見てください。それはかなり簡単です

コード：

$('body').on('click', '#grid td', function(e) {

    if ($(this).closest('td').next("#blankElement").length) {
        alert('Cell to the right');

    } else if ($(this).closest('td').prev("#blankElement").length) {
        alert('Cell to the left');

    } else if ($(this).parent().next().children("#blankElement").index() == $(this).index()) {
        alert('Cell is above');
    }
});​
于 2012-05-01T22:18:48.973 に答える