Выполнение той же функции с несколькими событиями щелчка в jquery

#javascript #jquery #ajax

Вопрос:

 $(document).on('click','#closeNewProductExpand', function() {

        $('#newProductExpand').css('width', '0');
    });

    $(document).on('click', '#searchProduct', function() {

        $('#newProductExpand').css('width', '0');
    });

    $(document).on('click', '#productsData', function() {

        $('#newProductExpand').css('width', '0');
    });
 

Здесь я хочу установить ширину #newProductExpand равной 0, если нажать одну из вышеперечисленных 3 кнопок.Есть ли какой-нибудь способ написать этот код, а не тратить впустую такое большое пространство.Я ценю вашу помощь.Спасибо

Ответ №1:

вы можете комбинировать селекторы с запятой.

 $(document).on('click','#closeNewProductExpand, #searchProduct, #productsData', function() {
    $('#newProductExpand').css('width', '0');
});
 

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

Комментарии:

1. Большое Вам спасибо

Ответ №2:

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

Подобный этому:

 $('.className').click(function(){
   $('#newProductExpand').css('width', '0');         
});