2

この HTML を考えると:

<div id="TABLE1" class="tabs">
    <table>
        <tbody datasrc="Music">
            <tr id="randomid">lorem</tr>
            <tr id="foo">lorem</tr>
            <tr id="abcde">lorem</tr>
            <tr id="fghijk">lorem</tr>
            <tr id="lmnop">lorem</tr>
            <tr id="qwerty">lorem</tr>
        </tbody>
    </table>
</div>
<div id="TABLE_2" class="tabs">
    <table>
        <tbody datasrc="Music">
            <tr id="random5">lorem</tr>
            <tr id="farhaf">lorem</tr>
            <tr id="haerf">lorem</tr>
            <tr id="hagasdg">lorem</tr>
            <tr id="hrfafh">lorem</tr>
            <tr id="qwerty">lorem</tr>
        </tbody>
    </table>
</div>
<div id="LASTTABLE" class="tabs">
    <table>
        <tbody datasrc="Music">
            <tr id="rtefdgag">lorem</tr>
            <tr id="wrtjfd">lorem</tr>
            <tr id="reaht">lorem</tr>
            <tr id="aggag">lorem</tr>
            <tr id="rthhre">lorem</tr>
            <tr id="argarg">lorem</tr>
        </tbody>
    </table>
</div>

<tr>各テーブルからランダムに 2 をトリガーしようとしています。私はこれを行う方法のことさえできません。

現在、私のテストでは次を使用しています：

$("#button").on('click', function () {
    $('#randomid').trigger('click')
})

ただし、このトリガーは最初のテーブルの最初の行のみです。

では、どうすればよいですか：

  1. #ボタンを押すと、
  2. 各テーブルから 2 つのランダムな行を取得、トリガー
  3. 10ミリ秒ごとに各行をクリックします（順序があるため）。

アプリについて:

音楽プレーヤーのサイトです。各テーブルには異なるスタイルの音楽があります。ロック、オルタナティブ、ジャズなど。「音楽をランダムに選択する」ボタンがあります)。そのボタンは、各テーブルから 2 つのランダムな tr をトリガーするので、2 つのジャズ ソング、2 つのロック ソングなどがプレイリストに追加されます。テーブルは次のようになります。チェックボックスよりも優れており、チェックボックスと同じように機能します。

ユーザーは「チェックボックス」をトリガーしたり、行の任意の場所をクリックして曲を選択したり (論理的) できるため、バックエンドは、特にチェックボックスではなく、行の任意の場所のクリックをキャプチャするように開発されています (したがって、私は選択していません)。それらをトリガーします）。各テーブルからランダムに2行クリックするだけのより良い解決策はないと思います。

IE8+ のサポート。

4

3 に答える 3

3

最初にこれを別の方法で行うことをお勧めしますが、クリックイベントをトリガーするように設定されている場合は、ここに一般的な考え方があります。

  $(".tab").each(function(){
        var count = $(this).children(tr).length;    
        var r1 = Math.floor(Math.random()*count); //Get a random number less than the total count of rows
        $(this).children('tr').eq(r1).trigger('click');//retrieve the nth (r1) item in the list and fire it's trigger event

    });
于 2012-05-08T20:22:25.883 に答える
3

以下の私のバージョンを参照してください。

デモ

注:以下のコードには、クリーンアップできるいくつかのデモ コードと冗長な vars がありますが、コードが明確で一目瞭然に見えるようにするため、そのままにしておきます。

$(function() {
    var $tables = $('table'); //gets the tree tables

    var mQ = []; //music queue
    var timer = null;
    $('button').click(function () {
        $('#result').html(''); //demo code
        var t = 0, $tr;
        var t1 = [];
        $tables.each(function () {
            $tr = $(this).find('tr');

            t1[0] = Math.floor(Math.random()*$tr.length);
            t1[1] = Math.floor(Math.random()*$tr.length);

            while (t1[0] == t1[1]) { //To make sure not same row is selected
                t1[1] = Math.floor(Math.random()*$tr.length);
            }

            mQ.push($tr.get(t1[0]));
            mQ.push($tr.get(t1[1]));
        });

        timer = setInterval(function () {//Create timer to trigger click every 10ms
            if (mQ.length == 0) {
                clearInterval(timer);
                return false;
            }
            $(mQ.shift()).click().addClass('selected');            
        }, 10);
    });

    $('tr').click(function () {
        //do your magic
        $('#result').append(this.id + '<br />');
    });
});
于 2012-05-08T20:09:49.477 に答える
1

Fiddleの新しいコードでも更新されました

多分もっとこのように？..。

$(function() {
    $("button").click(function(e) {
        $(".selected").removeClass("selected");

        $("table").each(function(i) {
            var irand = {
                a: Math.floor((Math.random()*($(this).find("tr").length)-1)+1),
                b: undefined
            };

            while (irand.b == irand.a || irand.b == undefined) {
                irand.b = Math.floor((Math.random()*($(this).find("tr").length)-1)+1);
            };

            console.log($(this).find("tr").filter(function(i) { return i == irand.a || i == irand.b }).addClass("selected"));
        });
    });
});​

ここで作業フィドルを参照してください...

于 2012-05-08T20:07:15.670 に答える