0

これは私の最初の質問なので、正しくフォーマットして言葉遣いできることを願っています。

サイト codeacademy で jQuery の学習を始めたばかりで、学習した内容に基づいて簡単なアプリケーションを作成しようとしています。これは、ブリストルの市長候補に基づいたトップ トランプ スタイルのゲームです (私が知っている非常に独創的ではありません)。

私が望むのは、マービン カードのオプションの 1 つをクリックすると、右側にロードされるカード (ジョージ) が同じ選択をハイライト表示することです。たとえば、オプション「ツイート」を選択すると、ジョージのカードの「ツイート」オプションが強調表示されてから、スライドがオンになります。

一般的なスタイリングと少しの jQuery に向けて何らかの方法を得ることができました (私の書き方を理解するのが難しい場合は申し訳ありません)。ここに例を示します。

http://jsfiddle.net/4vdf4/

別の div で強調表示された選択がユーザーのクリックに基づいて表示されるように、いくつかの jQuery をコーディングする方法についての考え。

どうもありがとう、マット

4

3 に答える 3

1

初めてのユーザーにとって、それは非常によく書かれた質問であり、長年のメンバーよりも優れていると最初に言わせてください!

単純化された例で、行の選択に関する質問のみに答えます。ここに例がありますhttp://jsfiddle.net/chricholson/xhAnK/1/

<div id="card1">
    <ul>        
        <li class="row1">Row 1</li>
        <li class="row2">Row 2</li>
        <li class="row3">Row 3</li>
        <li class="row4">Row 4</li>
    </ul>
</div>

<div id="card2">
    <ul>        
        <li class="row1">Row 1</li>
        <li class="row2">Row 2</li>
        <li class="row3">Row 3</li>
        <li class="row4">Row 4</li>
    </ul>
</div>

Jクエリ

$(document).ready(function(){

    $('div li').click(function(){

        // remove any previous selections
        $('div li').removeClass('selected'); 


        // get the class of the row you have clicked
        var strClass = $(this).attr('class'); 


        // apply the class to the other divs
        $('div li.' + strClass).addClass('selected');

    });

});​

どうしたの？基本的に、リスト項目をクリックすると、同様の div のパートナーが見つかります。この場合、クラスを使用したので、何らかの理由で行が乱れても問題ありません。固定された順序で固定された行があるため、名前ではなく行の位置に基づいて追跡できる可能性があります。

ID ではなくクラスを使用していることに注意してください。常に同じ行があるのと同じ理由で、クリックした行のクラスを取得し、同じ文字列を使用して他の場所で見つけることができることを意味します。あなたの場合、ID を使用すると、クリックしたリスト項目から受け取った ID 文字列を最初に操作し、最後に「1」を追加する必要があります。変更された例を参照してください: http://jsfiddle.net/chricholson/4vdf4/10/。ID とクラスの両方を使用できるため、ID を保持してデータを正しくバインドし、選択プロセスにクラスを使用することができます。

私の答えはあなたの質問よりもずっと不注意に書かれていないと思います! さらにガイダンスが必要な場合はお知らせください。

于 2012-08-15T11:06:13.683 に答える
0

あなたのマークアップはあまり良くありませんが、最小限の労力で、次の$(".link").clickように関数内の 2 番目のカードの対応するリスト項目にアクセスできます。

$('#' + $(this).attr('id') + '1').css('background-color','red');
于 2012-08-15T11:02:20.900 に答える
0

クリックコードをこれに置き換えるだけです。そして明らかに少し微調整します。

これは、リクエストどおりにインデックス LI をターゲットにします。

var getId;
            $("#stats li").click(function () {
                getId = $(this).index();
                $('#card1').slideToggle();
            });

            $(".link").click(function() {
                $(".link").css('color', '');
                $(".link").css('background-color', '');
                $(this).css('background-color', 'red');
                $(this).css('color', 'white');
                $(this).addClass('picked');
                $('#stats1 ul li').eq(getId).addClass("picked");
            });
于 2012-08-15T11:05:56.157 に答える