Skip to main content
1 of 3
Craig Ayre
  • 612
  • 4
  • 8

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

Craig Ayre
  • 612
  • 4
  • 8