Question

我不是最有经验的jquery作者，我想出了一个简单问题的解决方案，但对我来说这似乎不是最好的方法。我认为代码解释得最好：

$("#play_button").click( function () {
    $("#play_button").hide();
    $("#pause_button").show();
});

$("#pause_button").click( function () {
    $("#play_button").show();
    $("#pause_button").hide();
});

有关更好的代码块的任何建议，以实现相同的目标吗？

Answer 1

假设一个开始可见，而另一个不开始：

$("#pause_button, #play_button").click(function(){
  $("#play_button, #pause_button").toggle();
});

在线演示：http://jsbin.com/ewave/edit

如果你将一个简单的类应用于class='button'，你可以使它更简单：

$(".button").click(function(){
  $(".button").toggle();
});

Answer 2

以乔纳森的回答为基础，我有点像这样，但不太明确：

var buttons = $('#play_button, #pause_button');
buttons.click($.proxy(buttons, 'toggle'));

但它确实提供了在命名按钮时不必重复自己的优势。

Answer 3

您的代码看起来不错，但我至少会这样做：

$("#play_button").click( function () {
    $(this).hide();
    $("#pause_button").show();
});

$("#pause_button").click( function () {
    $(this).hide();
    $("#play_button").show();
});

使用$（this）增加了清晰度，恕我直言。

Johnathan Sampson的解决方案也很好，如果您愿意的话。

Answer 4

类似于Jonathan的答案，除了我会使用一个catchall id然后更改班级......

伪html

<element id="player_button" class="play">
</element>

的CSS：

#player_button { /* general style rules like position dimensions cursor */}
#player_button.play {/* play button bg image */}
#player_button.pause {/* pause button bg image */}

JS：

$('$player_button').click(function(){
   var button = $(this);
   if(button.is('.play'){
      // logic to initiate play
   }
   if(button.is('.pause')){
      // logic to initiate pause
   }

   button.toggleClass('pause').toggleClass('play');
});

当然，如果你使用1.4，你可以为toggleClass提供一个函数来检测应该添加/删除哪些类。这是首选，除非它具有功能意义，否则DOM中没有两个单独的元素。

改进JQuery MP3播放器插件代码

4 个答案: