[英]Why '$(document).ready(function()' is not working for this script?
当我单击按钮时,我确实有 JQuery 脚本正在工作。 但是我正在尝试像加载页面时那样工作,但不知何故,即使我在开始时尝试$(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>
这是代码。 如何修改以在不单击按钮的情况下运行它? 有了这个,当我单击按钮时它运行良好,但如果它修改和删除按钮以使其自行生成,则它不起作用。
我想让它像这样:
<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>'
var SkillBar = $(this).siblings().find('.inner'); 将不起作用,因为在加载时, $(this) 未定义。 您必须添加 class、标签或 ID 来代替 $(this)
<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>
如果我理解正确,这样的事情可能会起作用:您必须使用.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>
<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>
所以我试图让它像这样工作。 所以我不需要按钮来使脚本工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.