如何实现页面加载时默认隐藏左侧SVG箭头？

核心问题与修复思路 #

页面加载时count初始值为0（对应数组第一个元素Door），但原代码仅在点击左箭头回到count=0时才隐藏左箭头，因此需要在页面初始化阶段直接触发左箭头隐藏。同时原代码存在重复绑定点击事件的问题（每次触达数组首尾时都会给箭头新增绑定），会导致后续点击多次触发逻辑，需优化为统一的状态更新函数。

修改后的完整代码 #

JavaScript代码

var parts = ["Door", "Window", "Engine", "Wheels"];
var count = 0;

// 初始化内容与箭头状态
$("#parts").html(parts[0]);
updateArrowVisibility();

// 右箭头点击逻辑
$("#rightb").click(function() {
  count++;
  $("#parts").html(parts[count]);
  updateArrowVisibility();
});

// 左箭头点击逻辑
$("#leftb").click(function() {
  count--;
  $("#parts").html(parts[count]);
  updateArrowVisibility();
});

// 统一处理箭头显示/隐藏状态
function updateArrowVisibility() {
  // 到达数组开头，隐藏左箭头
  if (count === 0) {
    $("#leftb").hide();
  } else {
    $("#leftb").show();
  }
  
  // 到达数组末尾，隐藏右箭头
  if (count === parts.length - 1) {
    $("#rightb").hide();
  } else {
    $("#rightb").show();
  }
}

CSS代码

body {
  background: black;
}

.arrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

#leftb {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: -200px;
  margin-top: 25px;
  width: 50px;
  height: 60px;
  filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7));
}

#rightb {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: -200px;
  margin-top: 25px;
  width: 50px;
  height: 60px;
  filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7));
}

#parts {
  font-size: 24px;
  font-family: 'MS Reference Sans Serif', sans-serif;
  text-shadow: 10px 10px 30px black;
  color: White;
  margin-top: 35px;
  padding-right: 5px;
  padding-left: 5px;
  text-align: center;
  place-content: middle;
}

/* Arrow Animations */
.arrow {
  transform: translateX(-0%) translateY(-0%);
  transition: transform 0.1s;
}

.arrow-top,
.arrow-bottom {
  background-color: #666;
  height: 4px;
  left: -5px;
  position: absolute;
  top: 50%;
}

.arrow-top:after,
.arrow-bottom:after {
  background-color: #fff;
  top: 0;
  transition: all 0.5s;
}

.arrow-top {
  transform: rotate(45deg);
  transform-origin: bottom right;
}

.arrow-top:after {
  left: 100%;
  right: 0;
  transition-delay: 0.5s;
}

.arrow-bottom {
  transform: rotate(-45deg);
  transform-origin: top right;
}

.arrow-bottom:after {
  left: 0;
  right: 100%;
  transition-delay: 0.5s;
}

.arrow:hover .arrow-top:after {
  left: 0;
  transition-delay: 0.5s;
}

.arrow:hover .arrow-bottom:after {
  right: 0;
  transition-delay: 0.5s;
}

.arrow:active {
  transform: translateX(-0%) translateY(-0%) scale(0.9);
}

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="arrow">
  <button class="arrow left" id="leftb">
    <svg width="20px" height="40px" viewBox="0 0 50 80" xml:space="preserve">
      <polyline fill="none" stroke="#FFFFFF" stroke-width="4" 
                stroke-linecap="round" stroke-linejoin="round" 
                points="45.63,75.8 0.375,38.087 45.63,0.375 "/>
    </svg>
  </button>

  <div id="parts">Parts</div>

  <button class="arrow right" id="rightb">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
         width="20px" height="40px" viewBox="0 0 50 80" xml:space="preserve">
      <polyline fill="none" stroke="#FFFFFF" stroke-width="4" 
                stroke-linecap="round" stroke-linejoin="round" 
                points="0.375,0.375 45.63,38.087 0.375,75.8 "/>
    </svg>
  </button>
</div>

关键修改说明 #

1. 初始化隐藏左箭头：通过调用updateArrowVisibility()函数，在页面加载时直接根据初始count=0的状态隐藏左箭头，无需等待用户点击。
2. 统一状态管理：抽离updateArrowVisibility()函数，每次切换元素后统一处理箭头显示/隐藏，避免原代码中重复绑定点击事件导致的逻辑混乱。
3. 修正count计算：将原代码中count = (count - +1)修正为count--，写法更规范且避免潜在语法问题。
4. 适配数组长度：判断数组末尾时使用parts.length -1，而非硬编码3，提升代码可维护性（后续修改数组元素时无需手动调整数值）。

内容的提问来源于stack exchange，提问作者JulianDotExe