為什么 '$(document).ready(function()' 不適用於此腳本？

Question

當我單擊按鈕時，我確實有 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>'

Answer 1

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>

Answer 2

如果我理解正確，這樣的事情可能會起作用：您必須使用.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>

Answer 3

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

所以我試圖讓它像這樣工作。 所以我不需要按鈕來使腳本工作。

為什么 '$(document).ready(function()' 不適用於此腳本？

問題描述

3 個解決方案

解決方案1
1 已采納 2019-11-12 10:34:54

解決方案2
1 2019-11-12 10:34:55

解決方案3
0 2019-11-12 10:33:54

為什么 '$(document).ready(function()' 不適用於此腳本？

問題描述

3 個解決方案

解決方案1 1 已采納 2019-11-12 10:34:54

解決方案2 1 2019-11-12 10:34:55

解決方案3 0 2019-11-12 10:33:54

解決方案1
1 已采納 2019-11-12 10:34:54

解決方案2
1 2019-11-12 10:34:55

解決方案3
0 2019-11-12 10:33:54