You could reduce duplication by using an object mapping the selectors (class names in this case) to their responses
var selectorToResponse = {
'.ottogi': 'Ottogi',
'.sajo': 'Sajo Hapyo',
'.natura': 'Natura Bogata',
'.maloo': 'TOO Maлy',
'.dongush': 'Dongsuh',
'.may': 'OOO Maй'
}
Note, that for the first case (.ottogi
) you are changing the text to Ottogi if it is Ottogi which has no change, so it can be removed.
var selectorToResponse = {
'.sajo': 'Sajo Hapyo',
'.natura': 'Natura Bogata',
'.maloo': 'TOO Maлy',
'.dongush': 'Dongsuh',
'.may': 'OOO Maй'
}
From here you could loop over the object entries using a for...in
loop and define the event handlers. This way you only have to add further entries to selectorToResponse
instead of duplicating.
var selectorToReponse = {
'.ottogi': 'Ottogi',
'.sajo': 'Sajo Hapyo',
'.natura': 'Natura Bogata',
'.maloo': 'TOO Maлy',
'.dongush': 'Dongsuh',
'.may': 'OOO Maй'
}
// Prefixing with $ to denote that is an element, not text etc
var $header = $('.inner-container h1')
for (var selector in selectorToResponse) {
$(selector).click = function () {
// using $header.text() inside function so that is current header text
// `text` never changed in your example
if ($header.text() === 'Ottogi') { // using === instead of ==
var response = selectorToResponse[selector]
$header.text(response)
}
}
}
Notes
Above uses strict equality comparison (===
) instead of abstract equality comparison (==
). https://developer.mozilla.org/en/docs/Web/JavaScript/Equality_comparisons_and_sameness