Question

我使用jquery的默认网格视图设计了一个图表，用于速度和时间。我想从桌子上获得车辆的速度。

这是设计

<div data-role="page" id="home">
        <div data-role="header">
            <h1>Home Screen</h1>
        </div>
        <div data-role="content">
            <div class="ui-grid-d" id="SpeedLevel">
                <div class="ui-block-a"
                    style="border: 1px solid black; border-bottom:none; text-align: center; height:100px;width:5%;">
                    <p></p>
                </div>

                <div class="ui-block-b"
                    style="border: 1px solid black; text-align: center; height:100px; width:5%;">
                    <p>super fast</p>
                </div>
                <div class="ui-block-c"
                    style="border: 1px solid black; text-align: center; height:100px;width:30%;">
                    <span>S1</span>
                </div>
                <div class="ui-block-d"
                    style="border: 1px solid black; text-align: center; height:100px;width:30%;">
                    <span>S2</span>
                </div>
                <div class="ui-block-e"
                    style="border: 1px solid black; text-align: center; height:100px;width:30%;">
                    <span>S3</span>
                </div>
                <div class="ui-block-a rotate"
                    style="border: 1px solid black; border-bottom:none; border-top:none; text-align: center; height:100px;width:5%;">
                    <p>Speed</p>
                </div>
                <div class="ui-block-b"
                    style="border: 1px solid black; text-align: center; height:100px;width:5%;">
                    <p>Faster</p>
                </div>
                <div class="ui-block-c"
                    style="border: 1px solid black; text-align: center; height:100px;width:30%;">
                    <span>S4</span>
                </div>
                <div class="ui-block-d"
                    style="border: 1px solid black; text-align: center; height:100px;width:30%;">
                    <span>S5</span>
                </div>
                <div class="ui-block-e"
                    style="border: 1px solid black; text-align: center; height:100px;width:30%;">
                    <span>S6</span>
                </div>
                <div class="ui-block-a"
                    style="border: 1px solid black;border-top:none; text-align: center; height:100px;width:5%;">
                    <p></p>
                </div>
                <div class="ui-block-b"
                    style="border: 1px solid black; text-align: center; height:100px;width:5%;">
                    <p>Fast</p>
                </div>
                <div class="ui-block-c"
                    style="border: 1px solid black; text-align: center; height:100px;width:30%;">
                    <span>S7</span>
                </div>
                <div class="ui-block-d"
                    style="border: 1px solid black; text-align: center; height:100px;width:30%;">
                    <span>S8</span>
                </div>
                <div class="ui-block-e"
                    style="border: 1px solid black; text-align: center; height:100px;width:30%;">
                    <span>S9</span>
                </div>
            </div>
            <div class="ui-grid-solo" style="border: 1px solid black; text-align:center; height:30px;">
                <span>Time</span>
            </div>
        </div>
    </div>

这是我试过的onclick，我可以点击所有单元格并获取数据。

$(document).on('pageshow', '#home', function() {
    alert("in page");
    $('#SpeedLevel>div').on('click', function(e) {
        e.preventDefault();
//      alert("sdfa");
        alert($(this).text());
    });
});

现在我只需要点击S1，S2，S3，S4，S5，S6，S7，S8，S9单元格，当我点击这些单元格时，我需要获取相应的值..

我该怎么做？

提前致谢：）:)）

Answer 1

以下几行对我有用。

$(document).on('pageshow', '#home', function() {
    alert("in page");
    $('#SpeedLevel>.ui-block-c,.ui-block-d,.ui-block-e').on('click', function(e) {
        e.preventDefault();
        alert($(this).text());
    });
});

Answer 2

试试这个：

$('#SpeedLevel  div ').click(function(e) {
   alert($(this).find('span')[0].textContent)
});

jquery移动网格视图的onclick事件

2 个答案: