时间戳

首页 > 解决方案 > 在脚本开始时，所有三个元素都是可见的。是否可以只显示所选选项的元素

javascript - 在脚本开始时，所有三个元素都是可见的。是否可以只显示所选选项的元素

问题描述

在这个 html 代码中，有 3 个选项应该用脚本来处理。问题是当页面加载时默认显示所有项目，因此在脚本开始时可见。有没有办法隐藏它们并仅在脚本执行后显示它们？

$(document).ready(function() {
  $(".ios13-segmented-control").on("change", function() {
    $(".ios13-segmented-control .option input").each(function(i) {
      if ($(this).is(":checked")) $(".ios13-segmented-control .selection").css(
        "transform", "translateX(" + ($(this).outerWidth() * i) + "px)");
    });
  });
});

function check_value(fieldvalue) {
  switch (fieldvalue) {
    case 1:
      document.getElementByClassName("option").innerHTML = "Khar";
      break;
    case 2:
      document.getElementByClassName("option").innerHTML = "<h1>Santacruz</h1>";
      break;
    case 3:
      document.getElementByClassName("option").innerHTML = "<h1>Andheri</h1>";
      break;
  }
}
body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-overflow-scrolling: touch !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
  display: flex
}

* {
  box-sizing: border-box
}

body main {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto
}

label {
  cursor: inherit
}

.ios13-segmented-control {
  --background: rgba(239, 239, 240, 1);
  background: var(--background);
  border-radius: 9px;
  margin: 0;
  padding: 2.3px;
  border: none;
  outline: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.ios13-segmented-control .option {
  position: relative;
  cursor: pointer
}

.ios13-segmented-control .option:hover input:not(:checked)+label span,
.ios13-segmented-control .option:active input:not(:checked)+label span,
.ios13-segmented-control .option:focus input:not(:checked)+label span {
  opacity: .2
}

.ios13-segmented-control .option:active input:not(:checked)+label span {
  transform: scale(.95)
}

.ios13-segmented-control .option label {
  position: relative;
  display: block;
  text-align: center;
  padding: 3px 6vmin;
  background: rgba(255, 255, 255, 0);
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  font-size: 14px
}

.ios13-segmented-control .option label::before,
.ios13-segmented-control .option label::after {
  content: '';
  width: 1px;
  background: rgba(142, 142, 147, .15);
  position: absolute;
  top: 14%;
  bottom: 14%;
  border-radius: 10px;
  will-change: background;
  -webkit-transition: background .2s ease;
  transition: background .2s ease
}

.ios13-segmented-control .option label::before {
  left: 0;
  transform: translateX(-.5px)
}

.ios13-segmented-control .option label::after {
  right: 0;
  transform: translateX(.5px)
}

.ios13-segmented-control .option:first-of-type {
  grid-column: 1;
  grid-row: 1;
  box-shadow: none
}

.ios13-segmented-control .option:first-of-type label::before {
  opacity: 0
}

.ios13-segmented-control .option:last-of-type label::after {
  opacity: 0
}

.ios13-segmented-control .option input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  opacity: 0
}

.ios13-segmented-control .selection {
  background: rgba(255, 255, 255, 1);
  border: .5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 1px 0 rgba(0, 0, 0, 0.04);
  border-radius: 7px;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  will-change: transform;
  -webkit-transition: transform .2s ease;
  transition: transform .2s ease
}

.ios13-segmented-control .option label span {
  display: block;
  position: relative;
  z-index: 2;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  will-change: transform
}

.ios13-segmented-control .option input:checked+label::before,
.ios13-segmented-control .option input:checked+label::after {
  background: var(--background);
  z-index: 1
}

.ios13-segmented-control .option input:checked+label {
  cursor: default
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body ontouchstart="">
  <main>
    <div class="ios13-segmented-control"> <span class="selection"></span>
      <div class="option"> <input type="radio" id="khar" name="sample" value="khar" checked> <label for="khar"><span>Khar</span></label></div>
      <div class="option"> <input type="radio" id="santacruz" name="sample" value="santacruz"> <label for="santacruz"><span>Santacruz</span></label></div>
      <div class="option"> <input type="radio" id="andheri" name="sample" value="andheri"> <label for="andheri"><span>Andheri</span></label></div>
    </div>
    <div class="khar selectt"> <br> <strong style="font-size: 24px; font-weight: 700; line-height:30px;">Khar</strong><br></div>
    <div class="santacruz selectt"> <br> <strong style="font-size: 24px; font-weight: 700; line-height:30px;">Santacruz</strong><br></div>
    <div class="andheri selectt"> <br> <strong style="font-size: 24px; font-weight: 700; line-height:30px;">Andheri</strong><br></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $('input[type="radio"]').click(function() {
          var inputValue = $(this).attr("value");
          var targetBox = $("." + inputValue);
          $(".selectt").not(targetBox).hide();
          $(targetBox).show();
        });
      });
    </script>
  </main>
</body>

标签： javascripthtml

解决方案

well, looks like you have everything you need at hand, the solution is quite straite-forward: to

$(document).ready(function() {
  $('input[type="radio"]').click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".selectt").not(targetBox).hide();
    $(targetBox).show();
  });
});

add manual hiding:

$(document).ready(function() {
  $('input[type="radio"]').each(function(index, element) {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(targetBox).hide();
  }).click(function() {
    var inputValue = $(this).attr("value");
    var targetBox = $("." + inputValue);
    $(".selectt").not(targetBox).hide();
    $(targetBox).show();
  });
});

Simple substitution in your code gives:

$(document).ready(function() {
  $(".ios13-segmented-control").on("change", function() {
    $(".ios13-segmented-control .option input").each(function(i) {
      if ($(this).is(":checked")) $(".ios13-segmented-control .selection").css(
        "transform", "translateX(" + ($(this).outerWidth() * i) + "px)");
    });
  });
});

function check_value(fieldvalue) {
  switch (fieldvalue) {
    case 1:
      document.getElementByClassName("option").innerHTML = "Khar";
      break;
    case 2:
      document.getElementByClassName("option").innerHTML = "<h1>Santacruz</h1>";
      break;
    case 3:
      document.getElementByClassName("option").innerHTML = "<h1>Andheri</h1>";
      break;
  }
}
body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-overflow-scrolling: touch !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

body {
  display: flex
}

* {
  box-sizing: border-box
}

body main {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto
}

label {
  cursor: inherit
}

.ios13-segmented-control {
  --background: rgba(239, 239, 240, 1);
  background: var(--background);
  border-radius: 9px;
  margin: 0;
  padding: 2.3px;
  border: none;
  outline: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.ios13-segmented-control .option {
  position: relative;
  cursor: pointer
}

.ios13-segmented-control .option:hover input:not(:checked)+label span,
.ios13-segmented-control .option:active input:not(:checked)+label span,
.ios13-segmented-control .option:focus input:not(:checked)+label span {
  opacity: .2
}

.ios13-segmented-control .option:active input:not(:checked)+label span {
  transform: scale(.95)
}

.ios13-segmented-control .option label {
  position: relative;
  display: block;
  text-align: center;
  padding: 3px 6vmin;
  background: rgba(255, 255, 255, 0);
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  font-size: 14px
}

.ios13-segmented-control .option label::before,
.ios13-segmented-control .option label::after {
  content: '';
  width: 1px;
  background: rgba(142, 142, 147, .15);
  position: absolute;
  top: 14%;
  bottom: 14%;
  border-radius: 10px;
  will-change: background;
  -webkit-transition: background .2s ease;
  transition: background .2s ease
}

.ios13-segmented-control .option label::before {
  left: 0;
  transform: translateX(-.5px)
}

.ios13-segmented-control .option label::after {
  right: 0;
  transform: translateX(.5px)
}

.ios13-segmented-control .option:first-of-type {
  grid-column: 1;
  grid-row: 1;
  box-shadow: none
}

.ios13-segmented-control .option:first-of-type label::before {
  opacity: 0
}

.ios13-segmented-control .option:last-of-type label::after {
  opacity: 0
}

.ios13-segmented-control .option input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  border: none;
  opacity: 0
}

.ios13-segmented-control .selection {
  background: rgba(255, 255, 255, 1);
  border: .5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 1px 0 rgba(0, 0, 0, 0.04);
  border-radius: 7px;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  will-change: transform;
  -webkit-transition: transform .2s ease;
  transition: transform .2s ease
}

.ios13-segmented-control .option label span {
  display: block;
  position: relative;
  z-index: 2;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  will-change: transform
}

.ios13-segmented-control .option input:checked+label::before,
.ios13-segmented-control .option input:checked+label::after {
  background: var(--background);
  z-index: 1
}

.ios13-segmented-control .option input:checked+label {
  cursor: default
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body ontouchstart="">
  <main>
    <div class="ios13-segmented-control"> <span class="selection"></span>
      <div class="option"> <input type="radio" id="khar" name="sample" value="khar" checked> <label for="khar"><span>Khar</span></label></div>
      <div class="option"> <input type="radio" id="santacruz" name="sample" value="santacruz"> <label for="santacruz"><span>Santacruz</span></label></div>
      <div class="option"> <input type="radio" id="andheri" name="sample" value="andheri"> <label for="andheri"><span>Andheri</span></label></div>
    </div>
    <div class="khar selectt"> <br> <strong style="font-size: 24px; font-weight: 700; line-height:30px;">Khar</strong><br></div>
    <div class="santacruz selectt"> <br> <strong style="font-size: 24px; font-weight: 700; line-height:30px;">Santacruz</strong><br></div>
    <div class="andheri selectt"> <br> <strong style="font-size: 24px; font-weight: 700; line-height:30px;">Andheri</strong><br></div>
    <script type="text/javascript">
      $(document).ready(function() {
        $('input[type="radio"]').each(function(index, element) {
          var inputValue = $(this).attr("value");
          var targetBox = $("." + inputValue);
          $(targetBox).hide();
        }).click(function() {
          var inputValue = $(this).attr("value");
          var targetBox = $("." + inputValue);
          $(".selectt").not(targetBox).hide();
          $(targetBox).show();
        });
      });
    </script>
  </main>
</body>

This has a drawback that items are not hidden instantly, so they can "blink" on load, so you may prefer the solution proposed by Philipp (but that one may be different for different versions of jQuery.. at least it depends on the implementation of .hide() and .show() methods.

Also this may need some refactoring though, like

$(document).ready(() => {
  $('input[type="radio"]').each((index, element) => {
    const inputValue = $(element).attr("value");
    const $targetBox = $("." + inputValue);
    $targetBox.hide();
    $(element).click(() => {
      // recalc inputValue and $targetBox if they may change in your case
      $(".selectt").not($targetBox).hide();
      $targetBox.show();
    })
  });
});

推荐阅读