0

UL 内の各 LI からテキストを選択して収集するのに問題があります。例として、これまでに私が持っているものを参照してくださいhttp://jsfiddle.net/Twisty/YYbfY/

HTML

<div data-role="navbar" data-mini="true">
    <ul id="resultHeader">
        <li><span class='ui-btn ui-btn-inline ui-btn-up-b'><span class='ui-btn-inner'>Column A</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-b'><span class='ui-btn-inner'>Column B</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-b'><span class='ui-btn-inner'>Column C</span></span></li>
    </ul>
    <ul class='resultRow'>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d' title='mack5.com.'><span class='ui-btn-inner'>Item 1</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 2</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 3</span></span></li>
    </ul>
    <ul class='resultRow'>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d' title='mack5.com.'><span class='ui-btn-inner'>Item 1</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 2</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 3</span></span></li>
    </ul>
    <ul class='resultRow'>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d' title='mack5.com.'><span class='ui-btn-inner'>Item 1</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 2</span></span></li>
        <li><span class='ui-btn ui-btn-inline ui-btn-up-d'><span class='ui-btn-inner'>Item 3</span></span></li>
    </ul>
</div>

<textarea id="clipText-cell"></textarea>
<textarea id="clipText-row"></textarea>
<textarea id="clipText-all"></textarea>

<div id="copyPopup" data-role="popup" data-positionTo="origin">
    <div data-role="controlgroup" data-mini="true">
        <a href="" data-role="button" id="copyCell-btn">Copy '<span id="copyCellBtn-text"></span>'</a>
        <a href="" data-role="button" id="copyRow-btn">Copy Row</a>
        <a href="" data-role="button" id=copyAll-btn>Copy All Rows</a>
    </div>
</div>

Jクエリ

var tapTimer, isTapHold = false;
$(".resultRow li").bind("vmousedown vmouseup", function(e) {
    var clickedLi = $(this).parent().parent("li");
    var clickedUl = clickedLi.parent("ul");
    var cellText = $(this).text();
    var rowText = "";
    var tableText = "";    
    var rows = [];
    var table = [];

    if (e.type == "vmousedown") {
        tapTimer = setTimeout(function() {
            isTapHold = true;
            //alert("Click-Hold for 1.5 seconds.");
            $("#copyCellBtn-text").html(cellText);
            $("#clipText-cell").val(cellText);
            $("#clipText-row").val(rowText);
            $("#clipText-all").val(tableText);            
            $("#copyPopup").popup("open", {
                x: (e.pageX + 100),
                y: (e.pageY + 60)
            });
        }, 1500);
    } else {
        // e.type = 'vmouseup'
        // Clear the timeout if not already reached
        clearTimeout(tapTimer);

        // if flag is set to false, regular tap or click
        if (!isTapHold) {
            // Not Click-Hold, do nothing
        }

        // Reset flag
        isTapHold = false;
    }
});

私が望んでいるのは、ユーザーがクリックしたまままたはタップしたままにすると、クリックしたテキスト、行全体のテキスト、またはテーブル全体のテキストをコピーすることを選択できるポップアップ メニューが表示されることです。

li行データを収集するために、クリックされた 内のそれぞれを反復処理しul、対応する 内のすべてのテキストを収集する方法を見つけようとしていますtextarea。これを取得できたら、ul後ですべてのテキストを収集するために、すべての に対して同じことを行うループを作成できます。

4

2 に答える 2

1

以下のコードスニペットを使用できます

var rowtext = "" ;
    var rowText = $.each(clickedLi.parent("ul").children("li"),function(){
        rowtext += $(this).find("span.ui-btn-inner").html(); });

フィドルをチェックする

http://jsfiddle.net/YYbfY/26/

ありがとう

于 2012-12-08T03:17:32.710 に答える
1

ツイスティ、なんとかテーブル/行を突破できたと思います。

次の行に沿ってコードを整理することを検討してください。

$(function() {
    var $$ = {};//cache of static jQuery objects
    $$.copyCellBtn_text = $("#copyCellBtn-text");
    $$.clipText_cell = $("#clipText-cell");
    $$.clipText_row = $("#clipText-row");
    $$.clipText_all = $("#clipText-all");
    $$.copyPopup = $("#copyPopup");

    var tapTimer, 
        isTapHold = false, 
        tapHoldDelay = 1500,
        textJoinStr = ', ',//adjust as required
        textObj = { //fully populated later
            cell: '',
            row: '',
            table: ''
        };

    function makeTapTimer(e) {
        return setTimeout(function() {
            isTapHold = true;
            //alert("Click-Hold for 1.5 seconds.");
            $$.copyCellBtn_text.html(textObj.cell);
            $$.clipText_cell.val(textObj.cell);
            $$.clipText_row.val(textObj.row);
            $$.clipText_all.val(textObj.table);
            $$.copyPopup.popup("open", {
                x: (e.pageX + 100),
                y: (e.pageY + 60)
            });
        }, tapHoldDelay);
    }

    $("#resultHeader").closest("div").on("vmousedown", ".resultRow li", function(e) {
        tapTimer = makeTapTimer(e);

        var clickedCell = $(this);//==button
        var clickedUl = clickedCell.closest("ul");//==row
        var clickedTable = clickedCell.closest("div");//==table

        textObj.cell = clickedCell.text();

        textObj.row = clickedUl.data('text');
        if(!textObj.row) {
            textObj.row = $.map(clickedUl.find("li"), function(btn, i) {
                return $(btn).text();
            }).join(textJoinStr);
            clickedUl.data('text', textObj.row);
        }

        textObj.table = clickedTable.data('text');
        if(!textObj.table) {
            textObj.table = $.map(clickedTable.find(".resultRow li"), function(btn, i) {
                return $(btn).text();
            }).join(textJoinStr);
            clickedTable.data('text', textObj.table);
        }
    }).on('vmouseup', function() {
        clearTimeout(tapTimer);
        isTapHold = false;
    });
});

未テスト - デバッグが必要な場合があります

于 2012-12-08T10:33:35.217 に答える