为什么 '$(document).ready(function()' 不适用于此脚本？
[英]Why '$(document).ready(function()' is not working for this script?
问题描述
I do have JQuery script that is working when I click the button.
当我单击按钮时，我确实有 JQuery 脚本正在工作。 But I am trying to do like when page is loaded to work but somehow even I tried $(document).ready(function() at the beginning it doesn't work and I didn't understand what I am doing wrong.但是我正在尝试像加载页面时那样工作，但不知何故，即使我在开始时尝试$(document).ready(function()它也不起作用，而且我不明白我做错了什么。
<div class="skill">
<button style="width: 300px;">Show value</button>
<div class="outer">
<div class="inner" data-progress="100%">
<h2 id="demo">€0</h2>
<div></div>
</div>
</div>
</div>
<script>
$('.skill').on('click', 'button', function(){
var skillBar = $(this).siblings().find('.inner');
var skillVal = skillBar.attr("data-progress");
$(skillBar).animate({ height: skillVal}, 2100);
});
</script>
Here is the code.这是代码。 How can I modify to run it without clicking the button?如何修改以在不单击按钮的情况下运行它？ With this, when I click the button it is working well but if its to modify and remove button to make it by itself it does not work.有了这个，当我单击按钮时它运行良好，但如果它修改和删除按钮以使其自行生成，则它不起作用。
I want to make it like this:我想让它像这样：
<div class="skill">
<button style="width: 300px;">Show value</button>
<div class="outer">
<div class="inner" data-progress="100%">
<h2 id="demo">€0</h2>
<div></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var skillBar = $(this).siblings().find('.inner');
var skillVal = skillBar.attr("data-progress");
$(skillBar).animate({ height: skillVal}, 2100); });
</script>'
3 个解决方案
解决方案1
1 已采纳 2019-11-12 10:34:54
var skillBar = $(this).siblings().find('.inner');
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var skillBar = $('.inner');
var skillVal = skillBar.attr("data-progress");
$(skillBar).animate({
height: skillVal
}, 2100);
alert('a');
});
</script>
</head>
<body>
<div class="skill">
<button style="width: 300px;">Show value</button>
<div class="outer">
<div class="inner" data-progress="100%">
<h2 id="demo">€0</h2>
<div></div>
</div>
</div>
</div>
</body>
</html>
解决方案2
1 2019-11-12 10:34:55
If i understand you correctly something like this could work: You have to use .each() to define your function for each .skill element.如果我理解正确，这样的事情可能会起作用：您必须使用.each()为每个.skill元素定义 function 。
$(function() { $('.skill').each(function() { var skillBar = $(this).find('.inner'); var skillVal = skillBar.attr("data-progress"); $(skillBar).animate({ height: skillVal }, 2100); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="skill"> <div class="outer"> <div class="inner" data-progress="100%"> <h2 id="demo">€0</h2> <div></div> </div> </div> </div>
解决方案3
0 2019-11-12 10:33:54
<div class="skill">
<div class="outer">
<div class="inner" data-progress="100%">
<h2 id="demo">€0</h2>
<div></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var skillBar = $(this).siblings().find('.inner');
var skillVal = skillBar.attr("data-progress");
$(skillBar).animate({ height: skillVal}, 2100);
});
</script>
So i was trying to make it work like this.所以我试图让它像这样工作。 So I would not need button to make script work.所以我不需要按钮来使脚本工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.