自定义滑块（Toggle Slider）无法使用jquery工作

Question

使用Jquery（切换滑块）。

• 在加载时，应禁用左键（当前不起作用）。
• 首次点击后，应启用右键，然后左键。
• 当我们到达最后一张幻灯片时，应该禁用右键。 （目前无效）
• 当幻灯片进入第一个位置时，幻灯片不应再次移动
• 同样适用于最后一张幻灯片

以下是我的jQuery代码供参考。

＆＃13;

＆＃13;

$(".leftBtn").click(function(e) {
  goRight();
});
$(".rightBtn").click(function(e) {
  goLeft();
});


function goRight() { // inner stuff slides left
  var initalLeftMargin = $(".innerLiner").css('margin-left').replace("px", "") * 1;
  var newLeftMargin = (initalLeftMargin - 204); // extra 2 for border
  $(".innerLiner").animate({
    marginLeft: newLeftMargin
  }, 500);
}

function goLeft() { // inner stuff slides right
  var initalLeftMargin = $(".innerLiner").css('margin-left').replace("px", "") * 1;
  var newLeftMargin = (initalLeftMargin + 204); // extra 2 for border
  if (newLeftMargin >= 0){
            $(".leftBtn").css("display", "none");  
         } else {
             $(".leftBtn").css("display", "block");
         }
  $(".innerLiner").animate({
    marginLeft: newLeftMargin
  }, 500);
}

＆＃13;

* {
  Box-sizing: Border-box
}

.mycontainer {
  white-space: nowrap;
  overflow-x: hidden;
  width: 204px;
}

.box {
  display: inline-block;
  border: 2px black solid;
  padding: 20px;
  width: 200px;
  height: 100px;
  vertical-align: top;
  background-color: pink;
}

.box2 {
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="rightBtn" type="button" value="Left">

<div class="mycontainer">

  <div class="innerLiner">
    <span class="box">
      This is box1     
    </span>
    <span class="box">
      This is box2   
    </span>
    <span class="box box2">
      This is box3    
    </span>
  </div>

</div>
<input class="leftBtn" type="button" value="Right">

＆＃13;

＆＃13;

＆＃13;

Answer 1

您正朝着正确的方向前进。以下是修复代码的一些提示：

1. 将按钮更新代码移动到一个功能，以便于更新和调用。
2. 默认情况下显示两个按钮，并根据新边距隐藏正确的按钮。
3. 在用户点击任何内容之前，调用具有初始边距的功能以禁用正确的初始按钮。

简而言之，

formatted_date

以下是一个完整的代码段。请注意，我承担了轻微优化其他代码的责任。

function updateButtons( newLeftMargin ) {
  $(".leftBtn,.rightBtn").show(); // Show both buttons by default
  if ( newLeftMargin >= 0 )
    $(".rightBtn").hide();
  if ( newLeftMargin <= -408 )
    $(".leftBtn").hide();
}
updateButtons(0)

function goRight() { // inner stuff slides left
  var initalLeftMargin = parseInt( $(".innerLiner").css('margin-left') );
  var newLeftMargin = (initalLeftMargin - 204); // extra 2 for border
  updateButtons( newLeftMargin );
  $(".innerLiner").animate({
    marginLeft: newLeftMargin
  }, 500);
}

function goLeft() { // inner stuff slides right
  var initalLeftMargin = parseInt( $(".innerLiner").css('margin-left') );
  var newLeftMargin = (initalLeftMargin + 204); // extra 2 for border
  updateButtons( newLeftMargin );
  $(".innerLiner").animate({
    marginLeft: newLeftMargin
  }, 500);
}

function updateButtons( newLeftMargin ) {
  $(".leftBtn,.rightBtn").show(); // Show both buttons by default
  if ( newLeftMargin >= 0 )
    $(".rightBtn").hide();
  if ( newLeftMargin <= -408 )
    $(".leftBtn").hide();
}
updateButtons(0)

$(".leftBtn").click( goRight );
$(".rightBtn").click( goLeft );

* {
  Box-sizing: Border-box
}

.mycontainer {
  white-space: nowrap;
  overflow-x: hidden;
  width: 204px;
}

.box {
  display: inline-block;
  border: 2px black solid;
  padding: 20px;
  width: 200px;
  height: 100px;
  vertical-align: top;
  background-color: pink;
}

.box2 {
  background-color: yellow;
}