1

私はフィドルの準備ができています。jquery/javascriptの部分で助けが必要です。私が欲しいのは、ユーザーがアルバムカバーにカーソルを合わせたときに見つけた再生ボタンをクリックしたときに、レコード名/ステーションタイトルを変更することです。また、「プレーヤー」ボックスのレコード/ビニールの回転を開始したいと思います。今はホバーで回転しますが、変更したいと思います。

これがフィドルですhttp://jsfiddle.net/7txt3/1/

cssはちょっと長いので、ここにHTMLコードがあります。 

   <div class="grid_12">
            <div class="grid_6 alpha"><!-- record, overflow:hidden -->
            <div id="player">
            <div id="recordbox">
            <div class="record2">
            </div>
            </div>
            <div class="bars-box">
            <div class="player-box">
            <div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>            


<div class="bars">
                        <div class="bar-1"></div>
                        <div class="bar-2"></div>
                        <div class="bar-3"></div>
                        <div class="bar-4"></div>
                        <div class="bar-5"></div>
                        <div class="bar-6"></div>
                        <div class="bar-7"></div>
                        <div class="bar-8"></div>
                        <div class="bar-9"></div>
                        <div class="bar-10"></div>
                    </div>
                </div>
              </div>
            </div>

    <div class="grid_3">
    <div class="album">
    <div class="record">
    </div>
    <div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
    <a class="play" href="#">Play</a>
    </div>
    <div class="salad"><!-- sleeve -->
    <h3>Groove Salad</h3>
    </div>
    </div>
 </div>

 <div class="grid_3 omega">
    <div class="album">
    <div class="record">
    </div>
    <div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
    <a class="play" href="#">Play</a>
    </div>
    <div class="lush"><!-- sleeve -->
    <h3>Lush</h3>
    </div>
    </div>
    </div>
4

2 に答える 2

1

このようなもの？

$(function(){
    var station = $('.player-station');
    $('.play').click(function(){
        station.text($(this).closest('.album').find('h3').text());
    });
});

デモ： http： //jsfiddle.net/7txt3/3/

スピニングには、 http：//code.google.com/p/jqueryrotate/を使用できます。

于 2012-10-11T14:28:35.180 に答える
-1

したがって、まず最初に...IDの使用とクラスの使用について理解する必要があります。簡単に言うと、次のようになります。

  • ID=要素の一意の識別子
  • クラス=一連の要素の識別子

私がこれを取り上げる理由は、あなたにはclass="lush"意味をなさないような奇妙な命名規則があるからです。これはIDであり、クラスは「sleeve」のようなものである必要があります。

とにかく、これが更新されたコードとフィドルです。はい、もう少し凝縮することができます（タイトルに変数を設定しないでください）が、コードが少しよく見えるように広げたいと思いました。ご不明な点がございましたら、お気軽にお問い合わせください。

$('a.play').click(function() {

    var title = $(this).closest('.album').find('.album-title');

    $('span.player-station').text($(title).text());

});​

また、h3タグにクラスを追加したので、今後問題が発生することはありませんでした。

<h3 class="album-title">Lush</h3>

これがフィドルです：

http://jsfiddle.net/7txt3/4/

于 2012-10-11T14:35:06.387 に答える