jQueryとスクロールしてページを読み込んだページにラジオボタンを表示

Question

div #ktのHTMLページにはいくつかのラジオボタンがあります。 jQueryコードは、どのラジオボタンがチェックされているかを確認して、ページをスクロールする必要があります。とにかく、ページが読み込まれると、コードは機能しません。どんな助け？

$(document).ready(function(){ 
    $('#kt > input').each(function() { 
    var container = $('#kt'), 
     scrollTo = $(this); 

    if (scrollTo.is(':checked')) { 
     var leftOffset = scrollTo.offset().left - ($(window).width()/2 - scrollTo.width()/2) + container.scrollLeft(); 

     container.animate({ 
     scrollLeft: leftOffset 
     }, 1000); 
    } 
    }); 
}); 

<div id="kt" style="display: inline-block; width: 2000px"> 
 
<div style="float: left; width: 500px; text-align: center"><input name="nappi" type="radio" id="someID-6" class="listaus-valintaruutu" /></div> 
 
<div style="float: left; width: 500px; text-align: center"><input name="nappi" type="radio" id="someID-5" class="listaus-valintaruutu" /></div> 
 
<div style="float: left; width: 500px; text-align: center"><input name="nappi" type="radio" id="someID-4" class="listaus-valintaruutu" /></div> 
 
<div style="float: left; width: 500px; text-align: center"><input name="nappi" type="radio" id="someID-6" class="listaus-valintaruutu" /></div> 
 
</div>

Answer 1

これはうまく動作します：

$('#kaaviotaulukko input[type=radio]').each(function() { 
    var container = $('#kaaviotaulukko'), 
    scrollTo = $(this); 

    if (scrollTo.is(':checked')) { 
    var leftOffset = scrollTo.offset().left - ($(window).width()/2 - scrollTo.width()/2) + container.scrollLeft(); 

    container.animate({ 
     scrollLeft: leftOffset 
    }, 1000); 
    } 
}); 

Answer 2

input:checkedのためにあなたが計算された位置にアニメ化する必要がある要素はbody ...ではありませんコンテナdiv。

私はテストのための1 ...

$(document).ready(function(){ 
 
    $('#kt input').each(function() { 
 
    var container = $('#kt'), 
 
     scrollTo = $(this); 
 

 
    if (scrollTo.is(':checked')) { 
 
     var leftOffset = scrollTo.offset().left - ($(window).width()/2 - scrollTo.width()/2) + container.scrollLeft(); 
 
     console.log(leftOffset); 
 

 
     //container.animate({ 
 
     $("body").animate({ 
 
     scrollLeft: leftOffset 
 
     }, 1000); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="kt" style="display: inline-block; width: 2000px"> 
 
    <div style="float: left; width: 500px; text-align: center"> 
 
    <input name="nappi" type="radio" id="someID-6" class="listaus-valintaruutu" /> 
 
    </div> 
 
    <div style="float: left; width: 500px; text-align: center"> 
 
    <input name="nappi" type="radio" id="someID-5" class="listaus-valintaruutu" /> 
 
    </div> 
 
    <div style="float: left; width: 500px; text-align: center"> 
 
    <input name="nappi" type="radio" id="someID-4" class="listaus-valintaruutu" checked/> 
 
    </div> 
 
    <div style="float: left; width: 500px; text-align: center"> 
 
    <input name="nappi" type="radio" id="someID-6" class="listaus-valintaruutu" /> 
 
    </div> 
 
</div>