Как сократить код?

Question

[skdon]

День добрый!
Подскажите, пожалуйста, как можно сократить данный код?
Что бы не писать много одинаковых конструкций.

if (jQuery('.open-6').length > 0) {
        jQuery('.open-6').addClass('read-more-6');
        jQuery('.open-6').hide();
        jQuery('.open-form-6').toggle(function() {
            jQuery('.open-6').show(200);
        }, function() {
            jQuery('.open-6').hide(200);
        })
    }
    if (jQuery('.open-7').length > 0) {
        jQuery('.open-7').addClass('read-more-7');
        jQuery('.open-7').hide();
        jQuery('.open-form-7').toggle(function() {
            jQuery('.open-7').show(200);
        }, function() {
            jQuery('.open-7').hide(200);
        })
    }

Answer 1

[Максим Тимофеев]

иметь 1 класс open а номер передавать в data атрибуте. Хотя я не понимаю зачем Вам эта нумерация вообще нужна. Вы бы задачу описали, а не код. Так как видимо Вы в принципе решаете ее не верно

Comments

[skdon]

Имеются блоки вида

<span class="open-form-7">Блок 1</span>
<div class="open-7 read-more-7" style="padding-bottom: 20px; display: none;">
Какой то текст.
</div>

При клике на ссылку "Блок 1"
Ниже разворачивается скрытый блок, при повторном клике, сворачивается. Таких конструкций на сайте много. Писал их не я. Мне приходится теперь добавлять другие подобные блоки и писать много таких конструкций, я понимаю что не рационально.

Answer 2

[Алексей Скляров]

Во-первых, раз вы работаете с классами, не понятно почему вы добавляете классы: read-more-{ID} что они в себе несут?
Во-вторых, можно создать один уникальный класс использовать его везде в ваших блоках.
В-третьих, можно при клике (если у вас вообще используется такой обработчик) просто брать дата-атрибут ID (который вы укажите на каждом блоке) и подставлять в место цифры в ваше условие:$('.open-'+ID)
Но я считаю это глупой практикой, лучше использовать второй вариант.

Answer 3

[Андрей Кварцов]

function someFunc( id ) {
    var baseClass = '.open-' + id;
    if ($(baseClass).length > 0 ) {
        $( baseClass ).addClass( 'read-more-' + id ).hide();
        $('.open-form-' + id).toggle( function() {
            $(baseClass).show( 200 );
        }, function() {
            $(baseClass).hide( 200 );
        } )
    }
}