jQuery和頁面加載時滾動頁面選中單選按鈕

我有一個帶有div #kt的HTML頁面，它有幾個單選按鈕。 jQuery代碼應該檢查哪個單選按鈕被選中並將頁面滾動到它。無論如何，頁面加載時代碼將不起作用。任何幫助？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>

來源

2017-08-05 xms

什麼是您的HTML是什麼樣子？你爲什麼想要向左滾動？所有的單選按鈕是水平放置的嗎？ –

是的，有一個非常寬的div #kt和單選按鈕水平放置。 – xms

'#kt> input'表示輸入必須是'#kt'的直接子元素。如果不是，則要使用'#kt input'，它將採用所有'＃kt'子元素的輸入。你可以發佈HTML嗎？ –

這只是正常：

$('#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); 
    } 
});

來源

2017-08-05 02:29:03 xms

必須被動畫給您的input:checked計算位置的元素是body ...不容器div。

我查一個用於測試...

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

來源

2017-08-05 02:38:14

jQuery和頁面加載時滾動頁面選中單選按鈕

回答

相關問題