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）。您必须在添加类，标签或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() {
  $('.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 个答案: