时间戳

首页 > 解决方案 > 传递的函数不适用于 jquery 代码

javascript - 传递的函数不适用于 jquery 代码

问题描述

我试图通过将事件传递给按钮来创建一个函数，但它不起作用。我想要该功能做的是，当单击按钮时，在我单击的 DOM 中显示，并且还使用 innerhtml 在网页上显示一条消息，使用 if/else 取决于用户在时间 abd 输入中的输入

$(document).ready(function() {

  $('#calculate').on('click', function() {
    $('#calculate ul li input').slideToggle(800);
  });

  /********************************************************/
  var gender = $('#gender');
  var age = $('#age');
  var time = $('#time');
  var weigth = $('#weight');
  var result = $('#result');
  var calculate = $('#calculate');


  if (calculate.lenght) {
    /*event listener*/
    calculate.on('click', calculateF);
    /*para que cuando se haga click se active la funcion calcular
    que estoy creando abajo*/

    function calculateF(event) {
      event.preventDefault();
      console.log("click");

      var timeVal = parseInt(time.val());
      var weightVal = parseInt(weight.val());

      if (time > 8 && weight > 25) {
        result.html(" text ");

      } else {
        result.html("text");
      }


    }

  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="manejo_cargas" id="manejo_cargas">
  <h3>calculate work load</h3>
</div>

<section id="calculate">
  <div class="calculate">
    <ul>
      <li><input type="text" name="text" placeholder="Gender" id="gender"></li>
      <li><input type="number" name="number" placeholder="age" id="age"></li>
      <li><input type="number" name="number" placeholder="time" id="time"></li>
      <li><input type="number" name="number" placeholder="weight" id="weight"></li>
    </ul>
  </div>
</section>


<div class="calculate">
  <input type="button" class="button" value="result" id="calculate">
</div>

<!--here comes the result-->
<div class="result" id="result">

</div>

.

标签： javascriptjqueryaddeventlistener

解决方案

#如果您已将目标元素的 、 、 和 as 声明为 id time，weight则result您将丢失。calculate

据我猜测，weightandtime是输入，aresult是要被点击的。divcalculatebutton

我将假设它们是 id，因此#在 jquery 中指定选择器时需要在 id 之前添加，$()否则.如果它们是类名则使用。

然后，如果您要将代码从 javascript 转换为 jquery，则需要替换相应的函数addEventListener .innerHtml，例如.value等

您可以在下面看到工作，但是您必须添加的计算和消息在您的最后，因为您从未提供任何详细信息，所以我已经对代码进行了转换

$(document).ready(function() {
  var time = $('#time');
  var weight = $('#weight');
  var result = $('#result');
  var calculate = $('#calculate');



  /*event listener*/
  calculate.on('click', calculateF);

  function calculateF(event) {
    event.preventDefault();
    console.log("you hit click");
    /*new variables*/
    var timeVal = parseInt(time.val());
    var weightVal = parseInt(weight.val());

    if (time > 8 && weight > 25) {
      result.html(" if condition true ").show();
    } else {
      result.html("message from the else part").show();
    }
  }

});
.result {
  border: 1px solid #c7c7c7;
  padding: 5px;
  text-align: center;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!--here comes the result-->
<div class="result" id="result">

</div>
<div class="manejo_cargas" id="manejo_cargas">
  <h3>calculate work load</h3>
</div>

<section>
  <div class="calculate">
    <ul>
      <li><input type="text" name="text" placeholder="Gender" id="gender"></li>
      <li><input type="number" name="number" placeholder="age" id="age"></li>
      <li><input type="number" name="number" placeholder="time" id="time"></li>
      <li><input type="number" name="number" placeholder="weight" id="weight"></li>
    </ul>
  </div>
</section>


<div class="calculate">
  <input type="button" class="button" value="result" id="calculate">
</div>


<!--folder where my jquery code is saved-->
<script src="js/jquery.js"></script>
<!--folder where my jquery code is saved-->
<script src="js/scripts.js"></script>

EDIT

您的 HTML和按钮有重复id calculate，这就是它不起作用的原因 您不能有多个元素具有相同的 id 我使用了您的 HTML 并从标签中删除了 id，请参阅上面的演示sectioninputsection

推荐阅读