`EDIT`

Question

我尝试通过将事件传递给按钮来创建函数，但它无法正常工作。我想要的功能是，当点击按钮时，在我点击的DOM中显示，并在内部显示一条消息，在网页上使用if / else取决于时间abd权重的输入中的用户输入< / p>

$(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>

Answer 1

如果您宣布#，time，weight和result作为您要定位的元素的ID，则错过了calculate 。

据我所知，weight和time是输入，result是div而calculate是button点击。

我将假设它们是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按钮有section input重复，这就是为什么它不起作用你不能有多个具有相同ID的元素我已使用您的HTML并从section标记中删除了ID，请参阅上面的演示

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

1 个答案:

`EDIT`