1

私はこの機能を持っています。

$(".link").click(function(){
            var page = $(this).attr("id");
            var color = $(this).attr("class");
            var height = $(this).attr("class");
            var scrolltop = 100;
            color = color.substr(5,6);
            height = height.substr(12,6);
            $('#all_pages').animate({left: (page-1)*(-650) }); 
            $("body").animate({backgroundColor: '#'+color});
            $('html, body').animate({scrollTop: scrolltop}, 'slow');
            $("#container").animate({height: height});
            $("#all_pages").animate({height: height});
            $("#menu ul li").removeClass('active');
            $(this).addClass('active'); 
        });

およびこれらのリンク:

<div id="menu">
            <ul>
                <li id="1" class="link 99CCCC 0620px 0000px active">Home</li>
                <li id="2" class="link FF9933 0890px 0200px">Services</li>
                <li id="3" class="link 66FFCC 1265px 0210px">Tourism</li>
                <li id="4" class="link 99FF99 1580px 0220px">Prices</li>
                <li id="5" class="link FF9999 0485px 0230px">Ask question</li>
                <li id="6" class="link 00CCFF 0450px 0240px">Partners</li>
                <li id="7" class="link EBF291 0450px 0250px">FAQ</li>   
                <li id="8" class="link FFFF66 0850px 0260px">Contact Us</li>                            
            </ul>
        </div>

リンクから、背景の色、ページの高さを取得します。ページ上の位置情報も取得したいのですが、変数の値の取得方法がわかりません --- var scrolltop。

誰でも私を助けることができますか？

4

3 に答える 3

2

attribute を使用data-*して、カスタム属性の値を保持できます。

使用する

<li data-page="1" data-color="99CCCC" data-height="620" data-position="0" class="link active">Home</li>

それ以外の

<li id="1" class="link 99CCCC 0620px 0000px active">Home</li>

.data()JavaScript からプロパティを取得するために使用します。

$(".link").click(function() {
    /* cache the selector */
    var $this = $(this);
    /* Get the properties */
    var page = $this.data("page");
    var color = $this.data("color");
    var height = $this.data("height");
    /* I suppose this is what you wanted */
    var scrolltop = $this.data("position");
    ...
});​

それぞれをクリックすることで<li>、別の要素が存在するページ内の特定の位置にビューポートをスクロールすることになっている場合。次に、値をハードコーディングする代わりに、その要素の位置を取得してそこにスクロールできます。

例えば、

idに設定された要素にスクロールしhomeます。

<div id="home">

data-position属性をそのセレクターに設定します#home。

<li data-page="1" data-color="99CCCC" data-height="620" data-position="#home" class="link active">Home</li>

セレクターを使用して要素を取得し、それを使用してその位置を取得し.offset()、スクロールします。

var $target = $($this.data("position"));
var scrolltop = $target.offset().top;
$('html, body').animate({ scrollTop: scrolltop }, 'slow');
于 2012-12-30T11:23:40.067 に答える
1

このコードを使用して、位置を取得できます

$(this).offset().top;

このリンクでこの機能の詳細を見つけることができます

http://api.jquery.com/offset/

これが役に立つことを願っています。

于 2012-12-30T11:21:54.293 に答える
1

唯一のケースでは、HTML の結果を変更することはできません:
を使用して attr クラスからデータを取得し、「px」と先頭のゼロ.split(' ')は必要ないため、 を使用します。parseInt

jsBin デモ

$(".link").click(function(){
  
  var myClass   = $(this).attr("class").split(' '); // split class
  var color     = myClass[1];
  var height    = parseInt( myClass[2] , 10);
  var scrolltop = parseInt( myClass[3] , 10); 
  
  alert( color+' '+height+' '+scrolltop );
  
});

それ以外の場合はすべて.data()、@Alexander が提案する属性を使用します

于 2012-12-30T11:29:41.273 に答える