传递的函数不适用于jquery代码
传递的函数不适用于jquery代码
提问于 2018-06-11 00:10:20
我试图通过将事件传递给按钮来创建一个函数，但它不起作用。我想让这个函数做的是，当按钮被点击时，在我点击的DOM中显示，并且还使用innerhtml在网页上显示一条消息，使用if/ else，这取决于用户输入的时间和权重
$(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>
。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-11 00:28:22
如果您已将time、weight、result和calculate声明为目标元素的id，则缺少该#。
根据我的猜测，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
你的超文本标记语言有重复的section和input按钮的id calculate，这就是为什么它不能工作你不能有多个具有相同id的元素我已经使用了你的超文本标记语言并从section标签中删除了id，请看上面的演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50785610
复制相关文章
相似问题