Есть ли способ сократить этот код jquery?

Question

У меня есть сценарий jquery, но его долго (я думаю) Есть ли способ сделать этот код короче? Код добавляет классы к кнопке и абзацу, чтобы они отображались со своим текстом, каждая кнопка получила свой собственный текст (абзац).

---

JSFIDDLE

Я говорю о коде Jquery;) Но я могу изменить HTML и CSS Aswell при необходимости

$(function() {      //run when the DOM is ready 
    $(".button-case.een").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.een").toggleClass("active"); 
    $("p.inner-p.een").toggleClass("active"); //add the class to the clicked element 
    }); 
    $(".button-case.twee").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.twee").toggleClass("active"); 
    $("p.inner-p.twee").toggleClass("active"); //add the class to the clicked element 
    }); 
    $(".button-case.drie").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.drie").toggleClass("active"); 
    $("p.inner-p.drie").toggleClass("active"); //add the class to the clicked element 
    }); 
    $(".button-case.vier").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.vier").toggleClass("active"); 
    $("p.inner-p.vier").toggleClass("active"); //add the class to the clicked element 
    }); 
    $(".button-case.vijf").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.vijf").toggleClass("active"); 
    $("p.inner-p.vijf").toggleClass("active"); //add the class to the clicked element 
    }); 
    $(".button-case.zes").click(function() { //use a class, since your ID gets mangled 
    $(".button-case.zes").toggleClass("active"); 
    $("p.inner-p.zes").toggleClass("active"); //add the class to the clicked element 
    }); 
}); 

Answer 1

Вы можете использовать this внутри обработчика событий для обратитесь к элементу, который поднял событие. Оттуда вы можете перейти к DOM, чтобы изменить необходимые элементы. Попробуйте это:

$(".button-case").click(function() { 
    $(this).toggleClass("active"); 
    $(this).next('p').toggleClass("active"); 
}); 

Updated Fiddle

Вы можете сделать это событие одна строка с помощью add, если вы действительно хотите:

$(".button-case").click(function() { 
    $(this).add($(this).next()).toggleClass("active"); 
}); 

Однако это может быть немного некрасиво.

Answer 2

Вы можете

$(function() { //run when the DOM is ready 
 
    $(".button-case").click(function() { //use a class, since your ID gets mangled 
 
    //here this refers to the clicked button so 
 
    $(this).toggleClass("active"); 
 
    $(this).next().toggleClass("active"); //add the class to the clicked element 
 
    }); 
 
});

#buttons-case { 
 
    max-width: 707px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.button-case { 
 
    border: 1px solid #8A8A8A; 
 
    color: #8A8A8A; 
 
    font-size: 15px; 
 
    text-align: center; 
 
    line-height: 12px; 
 
    font: 300 15px/0.925"Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 
.btn { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 169px; 
 
    margin: 9px 21px auto; 
 
    padding: 10px; 
 
    height: 12px; 
 
} 
 
.btn.active { 
 
    height: 60px; 
 
    width: 707px; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    z-index: 500; 
 
    background: #fff; 
 
    padding-left: 24px; 
 
    padding-top: 16px; 
 
} 
 
.button-case.active { 
 
    text-align: left; 
 
} 
 
.button-holder { 
 
    max-width: 707px; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
p.inner-p { 
 
    display: none; 
 
} 
 
p.inner-p.active { 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 600; 
 
    top: 35px; 
 
    left: 46px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="button-holder"> 
 
    <div id="buttons-case"> 
 
    <a href="#" class="button-case btn een">GepasteTypografie</a> 
 
    <p class="inner-p een">eerste</p> 
 
    <a href="#" class="button-case btn twee">Grafische elementen</a> 
 
    <p class="inner-p twee">tweede</p> 
 
    <a href="#" class="button-case btn drie">Ga naar</a> 
 
    <p class="inner-p drie">derde</p> 
 
    <a href="#" class="button-case btn vier">Duidelijk werkproces</a> 
 
    <p class="inner-p vier">vierde</p> 
 
    <a href="#" class="button-case btn vijf">Responsive design</a> 
 
    <p class="inner-p vijf">vijfde</p> 
 
    <a href="#" class="button-case btn zes">Gebruiksvriendelijk</a> 
 
    <p class="inner-p zes">zesde</p> 
 
    </div> 
 
</div>

Answer 3

Вы можете добавить все селекторы в массив и петля через него, чтобы связать все, что вам нужно. Что-то вроде этого:

$(function() { 
    var sels = [$(".button-case.een"), $(".button-case.twee"), /* ... */]; 

    for (var i = 0, max = sels.length; i < max; i++ { 
     var sel = sels[i]; 
     sel.on('click', function() {/* code */}); 
    } 

}); 

Обратите внимание, что это всего лишь пример. Если лучше, вы можете написать массив с классами или даже объект со всеми вашими метаданными о каждой привязке и петле.

Вы также можете комбинировать этот подход с оптимизациями из других ответов.

Answer 4

Создать функцию для переключения и передачи информации о классе этой функции:

function toggleFunc(data) { 
    $(".button-case." + data).click(function() { 
    $(".button-case." + data).toggleClass("active"); 
    $("p.inner-p." + data).toggleClass("active"); 
}); 

$(function() { 
    toggleFunc('een'); 
    toggleFunc('twee'); 
    toggleFunc('drie'); 
    toggleFunc('vier'); 
    toggleFunc('vijf'); 
    toggleFunc('zes'); 
});