我设计了一个图表,使用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>

这是我尝试过的on click,我可以单击所有单元格并获取数据。
$(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单元格可点击,当我点击这些单元格时,我需要获得相应的值。。
我该怎么做??
提前谢谢:):)

最佳答案

下面这几行字对我起了作用。

$(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());
    });
});

09-11 20:30