2017-06-27 15 views
0

jQueryを使用して問題が発生しましたscrollTop()関数は$.each.となります。要素が何個でも、毎回scrollTop()関数はゼロを返します。 Get height of multiple divs with jqueryスレッドでコードを使用しましたが、height()からscrollTop()に変更されました(height()は依然としてゼロを返します)。scrollTop()はそれぞれ0を返します。

私が作成したコードはここにありますので、問題を理解するのがはるかに簡単です。

var acc = document.getElementsByClassName("accordion"); 
 
var i; 
 

 
for (i = 0; i < acc.length; i++) { 
 
    acc[i].onclick = function() { 
 
    this.classList.toggle("active"); 
 
    var panel = this.nextElementSibling; 
 
    if (panel.style.maxHeight) { 
 
     panel.style.maxHeight = null; 
 
    } else { 
 
     panel.style.maxHeight = panel.scrollHeight + "px"; 
 
    } 
 
    } 
 
} 
 

 
var $panel = $('.panel'), 
 
    totalHeight = 0; 
 

 
$.each($panel, function() { 
 
    totalHeight += $(this).scrollTop(); 
 
}); 
 

 
alert(totalHeight);
button.accordion { 
 
    background-color: #eee; 
 
    color: #444; 
 
    cursor: pointer; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    text-align: left; 
 
    outline: none; 
 
    font-size: 15px; 
 
    transition: 0.4s; 
 
} 
 

 
button.accordion.active, 
 
button.accordion:hover { 
 
    background-color: #ddd; 
 
} 
 

 
button.accordion:after { 
 
    content: '\002B'; 
 
    color: #777; 
 
    font-weight: bold; 
 
    float: right; 
 
    margin-left: 5px; 
 
} 
 

 
button.accordion.active:after { 
 
    content: "\2212"; 
 
} 
 

 
div.panel { 
 
    padding: 0 18px; 
 
    background-color: white; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-out; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="accordion">Lėšų išsiėmimai</button> 
 
<div class="panel"> 
 
    <div> 
 
    </div> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <th>Data</th> 
 
     <th>12 val.</th> 
 
     <th>0.01 Eur</th> 
 
     <th>Data</th> 
 
     <th>24 val.</th> 
 
     <th>0.02 Eur</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td colspan="3"></td> 
 
     <td>2017-06-26 01:39:16</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td colspan="3"></td> 
 
     <td>2017-06-24 14:43:50</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-06-24 14:43:27</td> 
 
     <td colspan="2">+</td> 
 

 
     <td>2017-06-15 14:43:43</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-06-15 14:42:23</td> 
 
     <td colspan="2">+</td> 
 

 
     <td>2017-06-07 16:34:04</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-06-07 16:33:36</td> 
 
     <td colspan="2">+</td> 
 

 
     <td>1970-01-01 03:00:00</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-06-06 15:13:41</td> 
 
     <td colspan="2">+</td> 
 

 
     <td>1970-01-01 03:00:00</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 
     <tr> 
 
     <td style="background: #0E82A7;">Iš viso</td> 
 
     <td style="background: #0E82A7;" colspan="2">0.0400 Eur</td> 
 
     <td style="background: #0E82A7;"></td> 
 
     <td style="background: #0E82A7;" colspan="2">0.1200 Eur</td> 
 
     </tr> 
 

 
    </tbody> 
 
    </table> 
 
</div> 
 
<div class="panel"> 
 
    <div> 
 
    </div> 
 
    <table> 
 
    <tbody> 
 
     <tr> 
 
     <th>Data</th> 
 
     <th>12 val.</th> 
 
     <th>0.01 Eur</th> 
 
     <th>Data</th> 
 
     <th>24 val.</th> 
 
     <th>0.02 Eur</th> 
 
     </tr> 
 

 
     <tr> 
 
     <td colspan="3"></td> 
 
     <td>2017-06-26 01:39:16</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 

 
     <tr> 
 
     <td colspan="3"></td> 
 
     <td>2017-06-24 14:43:50</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-06-24 14:43:27</td> 
 
     <td colspan="2">+</td> 
 

 
     <td>2017-06-15 14:43:43</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-06-15 14:42:23</td> 
 
     <td colspan="2">+</td> 
 

 
     <td>2017-06-07 16:34:04</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-06-07 16:33:36</td> 
 
     <td colspan="2">+</td> 
 

 
     <td>1970-01-01 03:00:00</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 
     <tr> 
 
     <td>2017-06-06 15:13:41</td> 
 
     <td colspan="2">+</td> 
 

 
     <td>1970-01-01 03:00:00</td> 
 
     <td colspan="2">+</td> 
 
     </tr> 
 
     <tr> 
 
     <td style="background: #0E82A7;">Iš viso</td> 
 
     <td style="background: #0E82A7;" colspan="2">0.0400 Eur</td> 
 
     <td style="background: #0E82A7;"></td> 
 
     <td style="background: #0E82A7;" colspan="2">0.1200 Eur</td> 
 
     </tr> 
 

 
    </tbody> 
 
    </table> 
 
</div>

+1

違いはありますが、 '$ .each($ panel)'ではなくjQueryコレクションをループするときに '$ panel.each()'を使用してください。 – Barmar

+1

また、なぜあなたはjクエリとバニラJS? – TricksfortheWeb

+0

@TricksfortheWebいくつかのコードは私によって書かれていた、後でそれを修正します。 –

答えて

0

コードが実行されると、あなたのパネルが

max-height:0; 

に設定されているとして、明らかに高さプロパティは0を返します。さて、機能:https://jsfiddle.net/08gccLph/

希望:)

を支援します。ここではフィドルがある

$(this).offset().top 

scrollTop() 

は、おそらく探しているものを、ウィンドウのスクロールをチェックしますがされます

+0

努力をありがとう、私は今確認する:) –

関連する問題