2017-02-08 3 views
0

У меня есть несколько событий с кликом, которые на самом деле делают то же самое. Кто-то сказал мне, что я должен использовать переключатель case для этого, чтобы я мог уменьшить свой код. Но я не знаю, как это сделать в сочетании с событием click.On Click с переключателем корпуса

$("#wishlist_top").on("click", function() { 
    window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)}; 
    hj('tagRecording', ['Klikt op "wishlist" in menu']); 
}); 

$(".wishlist").on("click", function() { 
    window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)}; 
    hj('tagRecording', ['Klikt op "plaats op wishlist"']); 
}); 

$(".product_size").on("click", function() { 
    window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)}; 
    hj('tagRecording', ['Klikt op "maat advies"']); 
}); 

$(".product_stock").on("click", function() { 
    window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)}; 
    hj('tagRecording', ['Klikt op "maat niet beschikbaar?"']); 
}); 

if ($('*').hasClass('404')) { 
    window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)}; 
    hj('tagRecording', ['Klant is op een 404 pagina gekomen']); 
} 

Спасибо!

+0

Я не вижу, что будет использовать здесь 'switch', потому что вы не обрабатываете разные случаи по-разному. Вместо этого вы обрабатываете разные случаи одинаково, а это значит, что вы можете разбить дублированный код на отдельный метод и просто вызвать метод из вашего onclick, передав ваши уникальные строки в качестве параметров для метода. – TheJim01

+0

Я согласен с Джим. Возможно, вам захочется объединить эти два общих оператора в одну функцию, а затем каждый вызов события вызова, который работает с различиями, отправленными в параметрах (два параметра для 'hj()', но я не уверен, что это действительно принесет вам много –

+0

lol, я вижу, что ответ ниже описывает то, что я сказал. –

ответ

3

Хотя вы можете использовать switch/case для этого, это может быть не лучшая идея. Вам все равно нужно прослушивать click событий для каждого класса/ID, поэтому я бы сделал функцию и вызвал ее с помощью определенной строки.

Используя код из выше, вы можете сделать функцию следующим образом:

function tagRecording(value) { 
    window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)}; 
    hj('tagRecording', [value]); 
} 

Теперь просто использовать click слушателя так:

$("#wishlist_top").on("click", 
    function() { tagRecording('Klikt op "wishlist" in menu'); }); 

Так в следующий раз вы хотите изменить свой код , вы просто меняете функцию tagRecording (вы можете переименовать ее, как вам нравится).

+0

Огромное вам спасибо! – T94

1

Другой вариант здесь - использовать атрибуты данных в вашей разметке. Добавьте сообщение, которое вы хотите передать в атрибут data-text в каждом из ваших элементов -

<a href="#" class="product_stock" data-text='Klikt op "wishlist" in menu'>Foo</a> 

И тогда вы можете создать один обработчик JS, который захватывает текст из атрибута данных:

$(".product_stock").on("click", function() { 
    window.hj=window.hj||function(){(hj.q=hj.q||[]).push(arguments)}; 
    hj('tagRecording', $(this).data("text")); 
}); 

Конечно, это работает, только если у вас есть контроль над созданием разметки.