このコードを簡略関数で書く方法はありますか？

Question

私は、特定の領域を強調するインタラクティブマップに取り組んでいます。今私はそれを修正しましたが、私はコードにshitloadを持っていますが、関数で書くことを始めましたが、開始方法はわかりません。誰かが私にこれを助けてくれることを願っています。私は出回っ機能highlightedAreaで始まったが、（全くエラーを）動作しませていないようですコードの下

：私は速記理解できる機能でこれを書くにはどうすればよい

function highlightArea(btn, popover, area) { 
    $(btn).click(function(){ 
     $(popover).css('display', 'block'); 
     $(area).css('display', 'block'); 
    }) 
} 

highlightArea('btn-sp', 'spbb-popover', '.spbb-popover'); 

$('.btn-sp').click(function() { 
    $('.hl-sp').css('display', 'block'); 
    $('.hl-vp').css('display', 'none'); 
    $('.hl-sl').css('display', 'none'); 
    $('.hl-ec').css('display', 'none'); 

    $('.spbb-popover').css('display', 'block'); 
    $('.popover').not(this).popover('hide'); 
}); 

$('.btn-vp').click(function() { 
    $('.hl-vp').css('display', 'block'); 
    $('.hl-sp').css('display', 'none'); 
    $('.hl-sl').css('display', 'none'); 
    $('.hl-ec').css('display', 'none'); 

    $('.vpbb-popover').css('display', 'block'); 
    $('.popover').not(this).popover('hide'); 
}); 

$('.btn-sl').click(function() { 
    $('.hl-sl').css('display', 'block'); 
    $('.hl-sp').css('display', 'none'); 
    $('.hl-vp').css('display', 'none'); 
    $('.hl-ec').css('display', 'none'); 

    $('.slbb-popover').css('display', 'block'); 
    $('.popover').not(this).popover('hide'); 
}); 

$('.btn-ec').click(function() { 
    $('.hl-ec').css('display', 'block'); 
    $('.hl-sp').css('display', 'none'); 
    $('.hl-sl').css('display', 'none'); 
    $('.hl-vp').css('display', 'none'); 

    $('.ecbb-popover').css('display', 'block'); 
    $('.popover').not(this).popover('hide'); 
}); 

？ここで

HTML：

<section id="" class="section section-lg section-hh ptt"> 
<div class="section-content container"> 
    <img src="../img/map/map-full.jpg" alt=""> 
    <button class="btn btn-sp btn-pointer">SAFARIPARK</button> 
    <button class="btn btn-vp btn-pointer">Vakantiepark</button> 
    <button class="btn btn-sl btn-pointer">Speelland</button> 
    <button class="btn btn-ec btn-pointer">Event Center</button> 

    <div class="spbb-popover popover top" role="tooltip"> 
     <div class="arrow"></div> 
     <h2 class="popover-title">Safaripark</h2> 
     <div class="popover-content">Uniek vakantiepark tussen de dieren en toegang tot 7 attracties!</br><span> Boeken op de kaart </span></div> 
     <div class="text-center"><a class='btn btn-primary'>Meer informatie</a></div> 
    </div> 

    <div class="vpbb-popover popover top" role="tooltip"> 
     <div class="arrow"></div> 
     <h2 class="popover-title">Vakantiepark</h2> 
     <div class="popover-content">Uniek vakantiepark tussen de dieren en toegang tot 7 attracties!</br><span> Boeken op de kaart </span></div> 
     <div class="text-center"><a href="vakantiepark-highlight.html" class='btn btn-primary'>Meer informatie</a></div> 
    </div> 

    <div class="slbb-popover popover top" role="tooltip"> 
     <div class="arrow"></div> 
     <h2 class="popover-title">Speelland</h2> 
     <div class="popover-content">And here's some amazing content. It's very engaging. Right? </div> 
     <div class="text-center"><a class='btn btn-primary'>Meer informatie</a></div> 
    </div> 

    <div class="ecbb-popover popover top" role="tooltip"> 
     <div class="arrow"></div> 
     <h2 class="popover-title">Event Center</h2> 
     <div class="popover-content">And here's some amazing content. It's very engaging. Right? </div> 
     <div class="text-center"><a class='btn btn-primary'>Meer informatie</a></div> 
    </div> 

    <div class="highlight-layer hl-sp"></div> 
    <div class="highlight-layer hl-vp"></div> 
    <div class="highlight-layer hl-sl"></div> 
    <div class="highlight-layer hl-ec"></div> 
</div> 

Answer 1

ここで私は私はあなたの答えから得るインスピレーションで作成した答えは以下の

ありがとうそのように、あなたはjQueryの各機能を使用して、単一の機能にコードを減らすことができますみんな:)

function highlightArea(btn, popover, area) { 
    $(btn).click(function(){ 
     setTimeout(
      function() { 
       $('.section-hh').css('background-color','#2E3725'); 
      }, 50); 

    $('.highlight-layer, .popover').fadeOut('fast'); 
    $(popover).fadeIn('fast'); 
    $(area).fadeIn('fast'); 
}) 
} 

highlightArea('.btn-sp', '.spbb-popover', '.hl-sp'); 
highlightArea('.btn-sl', '.slbb-popover', '.hl-sl'); 
highlightArea('.btn-ec', '.ecbb-popover', '.hl-ec'); 
highlightArea('.btn-vp', '.vpbb-popover', '.hl-vp'); 

Answer 2

私は表示/非表示の方法を使用して関数に繰り返しコードの断片を抽出お勧めしますし、セレクタを組み合わせることと思います。例えば：

function toggleSomething(lang, el) { 
    $('.hl').hide(); 
    $('.hl-' + lang).show(); 

    $('.slbb-popover').show(); 
    $('.popover').not(el).popover('hide'); 
} 

$('.btn').click(function() { 
    toggleSomething($(this).attr("lang"), this); 
} 

これは、あなたが例えば、HTMLを変更し、ボタンのラベルと「BTN BTN-ES」のための「HLのHL-ES」クラスを持つことができると仮定し

<p class="hl hl-es">...</p> 
<p class="hl hl-en">...</p> 

<button lang="es" class="btn"/> 
<button lang="en" class="btn"/> 

Answer 3

あなたのコードこれまで低減することができます。

function highlightArea(btn, selector) { 
    $(btn).click(function(){ 
     $(selector).show(); 
    }) 
} 

highlightArea('btn-sp', '.spbb-popover .spbb-popover'); 

$('.hl-sp, .hl-sl, .hl-vp, .btn-ec').click(function() { 
    $('.hl-sp, .hl-sl, .hl-vp, .btn-ec').hide(); 
    $(this).show(); 

    $('.'+$(this).data('popover-class')+'-popover').show(); 
    $('.popover').not(this).popover('hide'); 
}); 

あなたがする必要があるのは、関連する要素にdata-popover-class="SSS"を追加することです。

Answer 4

データ属性とクラスを使用するので、繰り返しコードは不要です。

$("[data-show]").on("click", function() { 
 
    var selector = $(this).data("show"), //get the selector of things to show 
 
     elems = $(selector).toggleClass("active"); //toggle active class on elements to show/hide 
 
    $(".items.active").not(elems).removeClass("active"); //Remove previously selected 
 

 
});

.items { display : none } 
 
.items.active { display : block }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button data-show=".foo">1</button> 
 
<button data-show=".bar">2</button> 
 
<button data-show=".camp">3</button> 
 

 
<div class="items foo">One</div> 
 
<div class="items bar">Two</div> 
 
<div class="items camp">Three</div>

Answer 5

利用の追加クラス（およびCSS-スタイル）あなたの上をクリックする要素の種類を識別するために。たとえば、マップ要素の「マプタイル」、ポップオーバーの場合は「popover」、ボタンの場合は「btn」などです。

var btns = $("#btns .btn"); 
var tiles = $(".maptile"); 
var popovers = $(".popover"); 

btns.each(function(){ 
    $(this).click(function(){ 
    var selected = $(this).attr("id"); 

    // Hide not selected 
    tiles.removeClass("highlighted"); 
    popovers.fadeOut("fast"); 

    // Highlight selected 
    $("." + selected).addClass("highlighted"); 
    $("." + selected).find(".popover").fadeIn("fast"); 
    }); 
}); 

の作業例：https://jsfiddle.net/u25z5jmj/