为什么“$(document).ready(function()”不适用于此脚本？

厄兹坎阿达尔

当我单击按钮时，我确实有正在运行的 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 、 tag 或 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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。