Question

我正在为我的滑块制作播放/暂停按钮。我有它的工作，它是完美的。几乎。我遇到的一个小问题（我确信有一个快速修复）是我只想显示一个播放/暂停图像，它会在点击时切换类。

我的图片有效，但由于我正在创建两个播放和暂停的类，因此我的滑块旁边会显示两个具有相同功能的图像！如何隐藏（摆脱）第二个图像，同时保留第二个图像的功能？我不能从HTML中删除第二个ul类，因为我已经为其分配属性，但我无法弄清楚如何不显示它。我尝试过在线搜索，但没有一个解决方案可以解决我的具体问题。

以下是代码：

＆＃13;

$('#autocontrols').on("click", '.bx-start', function() {
  alert("Starting!");
  main_slider.startAuto();
});

$('#autocontrols').on("click", '.bx-stop', function() {
  alert("Stoping!");
  main_slider.stopAuto();
});

$('#autocontrols ul').bind("click", function() {
  if ($(this).attr("class") == "bx-start")
    $(this).attr("class", "bx-stop");
  else
    $(this).attr("class", "bx-start");
});

＆＃13;

/*auto start button*/

ul.bx-start {
  background: image-url("pause.png") no-repeat 0 0;
  height: 50px;
}

/*auto stop button*/

ul.bx-stop {
  background: image-url("play.png") no-repeat 0 0;
  height: 50px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='autocontrols'>
  <ul class="bx-start">
  </ul>
  <ul class="bx-stop">
  </ul>
</div>

＆＃13;

Answer 1

此示例将切换元素的可见性。将.bx-stop的初始显示属性设置为none。

CSS：

.bx-start   { background: url( "play.png" ) no-repeat 0 0; height: 50px; }
.bx-stop    { background: url( "pause.png" ) no-repeat 0 0; height: 50px; display: none; }

HTML：

<div id='autocontrols'>
    <ul class="control bx-start"></ul>
    <ul class="control bx-stop"></ul>
</div>

使用Javascript：

$( '#autocontrols .control' ).on("click", function() {                
    $( '.control' ).hide().not( this ).show();              
});

$( '#autocontrols .bx-start' ).on( "click", function() {
    console.log( "Starting!" );
    main_slider.startAuto();
});

$( '#autocontrols .bx-stop' ).on( "click", function(){
    console.log( "Stoping!" );
    main_slider.stopAuto();
});

Answer 2

<强> jsBin demo

首先
<ul>标记不能用作 按钮 ，而是包含<li>列表元素
所以你需要的是这样的：

<span class="control start"></span>

与相关的css：

/* auto buttons */
.control{
  display:inline-block;
  width:50px;
  height:50px;
}
.start { background: url("play.png") no-repeat 0 0;}
.stop  { background: url("stop.png") no-repeat 0 0;}

比你需要的jquery变得非常简单：

$('.control').click(function(){

  // First toggle the class
  $(this).toggleClass('start stop');

  // now booleanize the current class
  var isPlay = $(this).hasClass('start');

  if(isPlay){
     // do something like: main_slider.startAuto();
  }else{
     // do something like: main_slider.stopAuto();
  }

});

上面的代码非常灵活，它允许您甚至在文档加载时启动自动播放，分配HTML：

<span class="control stop"></span> <!-- autoplaying so we need a stop class -->

以上所有内容都适用于特定情况。

隐藏第二个播放/暂停按钮

2 个答案: