如何在速记函数中编写此代码？

Question

我正在制作一个突出特定区域的互动地图。现在我修复了它，但我对代码有一个shitload我开始在函数中写出来但不知道如何启动。我希望有人能帮助我解决这个问题。

在代码下面，我已经开始使用highlightArea函数，但似乎没有工作（根本没有错误）：

 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

使用数据属性和类，因此不需要重复代码。

$("[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 2

我建议使用show / hide方法将重复代码片段提取到函数中并组合选择器。 E.g：

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并为标签设置“hl hl-es”类，为按钮设置“btn btn-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

使用其他类（和css样式）来标识您单击的元素类型。例如，地图元素的“maptiles”，弹出窗口的“popover”和按钮的“btn”。这样你就可以使用jquery的每个函数将代码减少到一个函数：

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/

Answer 5

下面是我用你的答案得到的灵感创造的答案谢谢你们:)

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');