JavaScript配列のクリック

Question

私は、同じ目的のために同じ行のJavascriptを使用しないようにしています。

私は3つのセクションがあります。

<div class="specs"></div> 
<div class="description"></div> 
<div class="comments"></div> 

そして、これらの3つのリンク：

<a href="#" class="readMore desc">Produkt beskrivelse</a> 
<a href="#" class="readMore spec">Produkt specs</a> 
<a href="#" class="readMore facebook"></i>Kommentarer</a> 

とセクション

$(".facebook").on('click', function() { 
    $('html, body').animate({ 
     scrollTop: $(".comments").offset().top - 200 
    }, 1000); 
}); 

$(".readMore.desc").on('click', function() { 
    $('html, body').animate({ 
     scrollTop: $(".description").offset().top - 200 
    }, 1000); 
}); 

$(".readMore.spec").on('click', function() { 
    $('html, body').animate({ 
     scrollTop: $(".specs").offset().top - 200 
    }, 1000); 
}); 

これら3枚のへクリックスクロールにこのJavaScriptは、 javascriptコードはまったく同じことをするので迷惑です。

ライブの例はseen here a live exampleです。製品イメージの右側に3つのボタンが表示されます。

解決策が何らかの並べ替えの配列を追加できるかどうかわかりません。

Answer 1

一つの方法は、各リンクにリンクがにスクロールすべき場所を記述しdata-性を付与されます。 .data()を使用すると、これらのプロパティにアクセスできます。

$(".readMore").on('click', function() { 
 
    // Get the selector of where to scroll to 
 
    var selector = $(this).data('selector'); 
 
    $('html, body').animate({ 
 
    scrollTop: $(selector).offset().top - 200 
 
    }, 1000); 
 
});

html, body { 
 
    height: 100%; 
 
} 
 
div { 
 
    height: 100%; 
 
    margin-top: 20px; 
 
    border: solid 1px #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" class="readMore desc" data-selector=".description">Produkt beskrivelse</a> 
 
<a href="#" class="readMore spec" data-selector=".specs">Produkt specs</a> 
 
<a href="#" class="readMore facebook" data-selector=".comments">Kommentarer</a> 
 

 
<div class="specs"> 
 
    Specs 
 
</div> 
 
<div class="description"> 
 
    Description 
 
</div> 
 
<div class="comments"> 
 
    Comments 
 
</div>

Answer 2

おそらく、オブジェクトのクラスを読み取っただけで、それを分割して必要な値を取得するほうがよいでしょう。そのように：

$('.readMore').on('click', function() { 
    var classes = $(this).attr('class'); 
    var cursor = class.split(' ')[1]; 

    if(cursor == 'facebook') { 
     ... 
    }else if(cursor == 'desc') { 
     ... 
    } else if(cursor == 'spec') { 
     ... 
    } 
}); 

Answer 3

コピー、貼り付け、コード

function foo(target, element) { 
    target.on('click', function() { 
     $('html, body').animate({ 
      scrollTop: element.offset().top - 200 
     }, 1000); 
    }); 
} 

foo($(".facebook"), $(".comments")); 
foo($(".readMore.desc"), $(".description")); 
foo($(".readMore.spec"), $(".specs")); 

Answer 4

共通のクラスの代わりにヘルパー関数を使用します（あなたが持っている）とデータ属性は、ここに保存されます。

<a href="#" class="readMore desc" data-dest=".comments">Produkt beskrivelse</a> 
<a href="#" class="readMore spec" data-dest=".specs">Produkt specs</a> 
<a href="#" class="readMore facebook" data-dest=".description"></i>Kommentarer</a> 

そして今、1それらすべてを支配するハンドラ：これを扱うの

$(".readMore").on('click', function() { 
    var dest = $(this).data("dest"); 

    $('html, body').animate({ 
     scrollTop: $(dest).offset().top - 200 
    }, 1000); 
}); 

Answer 5

//extraced the common parts 
function scrollToTop (elementSelector) { 
    $('html, body').animate({ 
     scrollTop: $(elementSelector).offset().top - 200 
    }, 1000); 
} 

$(".facebook").on('click', function() { 
    scrollToTop('.comments'); 
}); 

$(".readMore.desc").on('click', function() { 
    scrollToTop('.description'); 
}); 

$(".readMore.spec").on('click', function() { 
    scrollToTop('.specs'); 
}); 

Answer 6

あなたはどれをもたらすされたDOMマッピングする必要がありますまず。何らかのクラス名規約を使用してこれを解決できました。私はあなたがクラス名を決定することができないと仮定します。それでは、

に

var map = { 
    spec: "specs", 
    desc: "description", 
    facebook: "comments, 
} 

をマップ/オブジェクト/ハッシュを作成してみましょう今度は、ちょうどマップを反復し、機能

Object.keys(map).forEach(function(key) { 
    var value = map[key]; 
    $(".readMore." + key).on('click', function() { 
    $('html, body').animate({ 
     scrollTop: $("." + value).offset().top - 200 
    }, 1000); 
    }); 
}) 

を追加してみましょうそして今、あなたは幸せコーダーです。

Answer 7

あなたはクロージャを学んだ場合、私は私がjsFiddle for this here

// use a closure to make your event's callback, 
// with the target as a parameter 
function makeClickFn(target) { 
    return function() { 
     $('html, body').animate({ 
      scrollTop: $(target).offset().top - 200 
     }, 1000); 
    }; 
} 

var clickFn; 

// facebook comments 
clickFn = makeClickFn('.comments'); 
$(".facebook").on('click', clickFn); 

// readmore description 
clickFn = makeClickFn('.description'); 
$(".readMore.desc").on('click', clickFn); 

// readmore specs 
clickFn = makeClickFn('.specs'); 
$(".readMore.spec").on('click', clickFn);