我想在用户点击播放按钮时更改电台名称

时间:2012-10-11 14:19:09

标签: javascript jquery html css

我有小提琴准备好了我只需要帮助jquery / javascript部分。我想要的是当用户点击他们在悬停在专辑封面上时找到的播放按钮时,更改记录名称/电台标题。我还希望“播放器”框中的记录/乙烯基开始旋转。现在它在悬停时旋转,但我想改变它。

这是小提琴http://jsfiddle.net/7txt3/1/

这里只是html代码因为css有点长!

   <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>

2 个答案:

答案 0 :(得分: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/

答案 1 :(得分:-1)

所以,首先要做的是......你需要阅读使用ID而不是使用Class。简单地说:

  • ID =元素的唯一标识符
  • Class =一系列元素的标识符

我提出这个问题的原因是因为你有一些奇怪的命名约定,比如class="lush"这些没有意义。那应该是一个id,这个类应该是“袖子”。

无论如何,这里是更新的代码和小提琴。是的,你可以让它更浓缩(不为标题设置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/