一个更聪明的方法来做这个JS

时间：2017-10-01 19:47:57

标签： javascript jquery html

我有这个代码，用户可以点击某些复选框，并根据他们的输入提供各种答案的输出。

我对JavaScript很陌生，所以我只想尝试挖掘某些案例以便学习。我非常确信，有一种更聪明的方法来执行这个JS代码，但我不确定如何。

我不希望你必须执行正确的代码方式，但只是告诉我应该去哪个方向来做这个＆＃34;对＆＃34;。

＆＃13;
＆＃13; 
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <style>
    .hide {
      display: none; //add this property
    }
  </style>

</head>

<body>
  <div class="decider hide">
    <p style="font-size:18px;color:#000;">Hvilken bolig bor du i?</p>
    <label class="checkbox">
        <input id="egetHus" type="checkbox" name="Request" value="Request" />
        Eget hus/rækkehus </label>
    <label class="checkbox">
        <input id="lejetHus" type="checkbox" name="Download" value="Download" />
        Lejet hus/rækkehus</label>
    <label class="checkbox">
        <input id="lejlighed" type="checkbox" name="test" value="test" />
        Ejer-/lejet lejlighed</label>
    <label class="checkbox">
        <input id="fritidshus" type="checkbox" name="test1" value="test1" />
        Fritidshus</label>
    <br />

    <p style="font-size:18px;color:#000;">Har du børn?</p>
    <label class="checkbox">
        <input id="hjemmeboendeBoern" type="checkbox" name="Request" value="Request" />
        Hjemmeboende børn</label>
    <label class="checkbox">
        <input id="udeboendeBoern" type="checkbox" name="Download" value="Download" />
        Udeboende børn</label>
    <br />

    <p style="font-size:18px;color:#000;">Hvilket transportmidler har du?</p>
    <label class="checkbox">
        <input id="bil" type="checkbox" name="Request" value="Request" />
        Bil</label>
    <label class="checkbox">
        <input id="motorcykel" type="checkbox" name="Download" value="Download" />
        Motorcykel</label>
    <label class="checkbox">
        <input id="knallert" type="checkbox" name="test" value="test" />
        Knallert</label>
    <label class="checkbox">
        <input id="cykel" type="checkbox" name="test1" value="test1" />
        Cykel</label>
    <br />

    <span class="select"> 
        <input type="button" id="send-decide" alt="submit" value="select" />
    </span> 
  </div>

  <!-- VISIBLE IF CHECKED -->
  <div class="egetHus">
    <p>this is first box</p>
  </div>

  <div class="lejetHus">
    <p>this is second box</p>
  </div>

  <div class="lejlighed">
    <p>this is third box</p>
  </div>

  <div class="fritidshus">
    <p>this is fourth box</p>
  </div>

  <div class="hjemmeboendeBoern">
    <p>this is fifth box</p>
  </div>

  <div class="udeboendeBoern">
    <p>this is sixth box</p>
  </div>

  <div class="bil">
    <p>this is sixth box</p>
  </div>

  <div class="motorcykel">
    <p>this is sixth box</p>
  </div>

  <div class="knallert">
    <p>this is sixth box</p>
  </div>

  <div class="cykel">
    <p>this is sixth box</p>
  </div>


  <script>
    $(function() {
      $('.decider').removeClass('hide');
      $('.egetHus,.lejetHus,.lejlighed,.fritidshus,.hjemmeboendeBoern,.udeboendeBoern,.bil,.motorcykel,.knallert,.cykel').addClass('hide'); //add hide to both the class


      $("#send-decide").click(function() {
        if ($('input[type="checkbox"]:checked').length) {

          $('.decider ').addClass('hide');
          if ($('#egetHus').is(':checked')) {
            $('.egetHus').removeClass('hide');
          }
          if ($('#lejetHus').is(':checked')) {
            $('.lejetHus').removeClass('hide');
          }
          if ($('#lejlighed').is(':checked')) {
            $('.lejlighed').removeClass('hide');
          }
          if ($('#fritidshus').is(':checked')) {
            $('.fritidshus').removeClass('hide');
          }
          if ($('#hjemmeboendeBoern').is(':checked')) {
            $('.hjemmeboendeBoern').removeClass('hide');
          }
          if ($('#udeboendeBoern').is(':checked')) {
            $('.udeboendeBoern').removeClass('hide');
          }
          if ($('#bil').is(':checked')) {
            $('.bil').removeClass('hide');
          }
          if ($('#motorcykel').is(':checked')) {
            $('.motorcykel').removeClass('hide');
          }
          if ($('#knallert').is(':checked')) {
            $('.knallert').removeClass('hide');
          }
          if ($('#cykel').is(':checked')) {
            $('.cykel').removeClass('hide');
          }
        } else
          alert('select a checkbox');
      });
    });
  </script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您可以使用以下代码替换所有if else语句

$('input[type="checkbox"]:checked').each(function(index, el) {
    $('.' + el.id).removeClass('hide')
});

这将有效，因为每个复选框的id和相应的p类都是相同的。

答案 1 :(得分：0)

我做得有点干净简单。如果o / p不正确，请尝试并发表评论。

$(function() {
  var arr = [
    'egetHus',
    'lejetHus',
    'lejlighed',
    'fritidshus',
    'hjemmeboendeBoern',
    'udeboendeBoern',
    'bil',
    'motorcykel',
    'knallert',
    'cykel'
  ];
  
  $('.decider').removeClass('hide');
  
  $.each(arr, function(key, elem) {
    $('.' + elem).addClass('hide'); //add hide to both the class
  });

  $("#send-decide").click(function() {
    if ($('input[type="checkbox"]:checked').length) {
      $('.decider ').addClass('hide');
      $.each(arr, function(key, elem) {
        if ($('#' + elem).prop('checked') === true) {
          $('.' + elem).removeClass('hide');
        }
      });
    } else
      alert('select a checkbox');
  });
});
.hide {
  display: none; //add this property
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="decider hide">
  <p style="font-size:18px;color:#000;">Hvilken bolig bor du i?</p>
  <label class="checkbox">
        <input id="egetHus" type="checkbox" name="Request" value="Request" />
        Eget hus/rækkehus </label>
  <label class="checkbox">
        <input id="lejetHus" type="checkbox" name="Download" value="Download" />
        Lejet hus/rækkehus</label>
  <label class="checkbox">
        <input id="lejlighed" type="checkbox" name="test" value="test" />
        Ejer-/lejet lejlighed</label>
  <label class="checkbox">
        <input id="fritidshus" type="checkbox" name="test1" value="test1" />
        Fritidshus</label>
  <br />

  <p style="font-size:18px;color:#000;">Har du børn?</p>
  <label class="checkbox">
        <input id="hjemmeboendeBoern" type="checkbox" name="Request" value="Request" />
        Hjemmeboende børn</label>
  <label class="checkbox">
        <input id="udeboendeBoern" type="checkbox" name="Download" value="Download" />
        Udeboende børn</label>
  <br />

  <p style="font-size:18px;color:#000;">Hvilket transportmidler har du?</p>
  <label class="checkbox">
        <input id="bil" type="checkbox" name="Request" value="Request" />
        Bil</label>
  <label class="checkbox">
        <input id="motorcykel" type="checkbox" name="Download" value="Download" />
        Motorcykel</label>
  <label class="checkbox">
        <input id="knallert" type="checkbox" name="test" value="test" />
        Knallert</label>
  <label class="checkbox">
        <input id="cykel" type="checkbox" name="test1" value="test1" />
        Cykel</label>
  <br />

  <span class="select"> 
        <input type="button" id="send-decide" alt="submit" value="select" />
      </span> </div>

<!-- VISIBLE IF CHECKED -->
<div class="egetHus">
  <p>this is first box</p>
</div>

<div class="lejetHus">
  <p>this is second box</p>
</div>

<div class="lejlighed">
  <p>this is third box</p>
</div>

<div class="fritidshus">
  <p>this is fourth box</p>
</div>

<div class="hjemmeboendeBoern">
  <p>this is fifth box</p>
</div>

<div class="udeboendeBoern">
  <p>this is sixth box</p>
</div>

<div class="bil">
  <p>this is sixth box</p>
</div>

<div class="motorcykel">
  <p>this is sixth box</p>
</div>

<div class="knallert">
  <p>this is sixth box</p>
</div>

<div class="cykel">
  <p>this is sixth box</p>
</div>

相关问题
最新问题