1

I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.

Here is the fiddle http://jsfiddle.net/7txt3/1/

and here is just the html code because the css is kinda long! 

   <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”之类的东西。

无论如何，这是更新的代码和小提琴。是的，你可以让它更简洁一些（不要为标题设置 var），但我想把它展开，这样你就可以更好地看到代码。如果您有任何问题，请告诉我。

$('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 回答