默认情况下隐藏SVG，直到单击按钮

Question

如何确保默认情况下隐藏左箭头(SVG(。

箭头在阵列中循环，当到达Wheels时，右箭头消失，当返回Door时，左箭头消失。箭头不断出现和消失，这样你就知道自己是最后一个索引还是第一个索引。

打开页面时，如何使左箭头在开始时消失，而不必先按右箭头，然后按左箭头。

var parts = ["Door", "Window", "Engine", "Wheels"];
var count = 0
$("#parts").html(parts[0]);
$("#rightb").click(function() {
count = (count + 1)
$("#parts").html(parts[count])
if (count >= 3) {
$("#rightb").hide();
$("#leftb").click(function() {
$("#rightb").show()
})
}
});
$("#leftb").click(function() {
count = (count - +1)
$("#parts").html(parts[count])
if (count == 0) {
$("#leftb").css("display", "none")
$("#rightb").click(function() {
$("#leftb").css("display", "block")
})
}
});

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);
}

<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" 
http://jsfiddle.net/JulianDotExe/mrsvL35w/33/#            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>

Answer 1

您可以按照@Reyno的建议，最初为左侧按钮提供默认样式的display: none，并在按下按钮时为其提供display: block。

var parts = ["Door", "Window", "Engine", "Wheels"];
var count = 0
$("#parts").html(parts[0]);

$("#rightb").click(function() {
count = (count + 1)
$("#leftb").css("display", "block")
$("#parts").html(parts[count])
if (count >= 3) {
$("#rightb").hide();
$("#leftb").click(function() {
$("#rightb").show()
})
}
});
$("#leftb").click(function() {
count = (count - +1)
$("#parts").html(parts[count])
if (count == 0) {
$("#leftb").css("display", "none")
$("#rightb").click(function() {
$("#leftb").css("display", "block")
})
}
});

body {
background: black;
}
.arrow {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
}
#leftb {
position: absolute;
background: none;
border: none;
cursor: pointer;
display: none;
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);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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" 
http://jsfiddle.net/JulianDotExe/mrsvL35w/33/#            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>