0

Я уже несколько часов ломаю себе голову, не могу понять почему мой код не работает правильно. В общем моя цель чтобы при клике на главной странице, менялся текст внутри тэга <h1>

Пример

Ранее я уже выполнил это простым способом как показано ниже, и конечно прописывал каждый класс элемента .ottogi .sojo .natura ну итд. Можно ссылаться по следующей ссылке http://test1.testkz.ru/

var text = $('.inner-container h1').text();
var changeString = $('.inner-container h1');

$('.ottogi').click(function() {
    if (text == 'Ottogi') {
        $(changeString).text('Ottogi');
    }
});
 $('.sajo').click(function() {
     if (text == 'Ottogi') {
        $(changeString).text('Sajo Hapyo');
    }
 });

Потом, чтобы не повторять данную процедуру 6 раз, решил создать объект, и пробижаться по нему циклом for ... in для реализации данной процедуры. Возможно мой if не срабатывает правильно. Ребята посмотрите и помогите пожалуйста

const selectorToResponse = {
  '.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
const $header = $('.inner-container h1')

for (const 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 ==
      const response = selectorToResponse[selector]

      $header.text(response)
    }
  }
}

Вот HTML

        <div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12">
            <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
            <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
            <div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
            <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
            <div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
            <div class="shadow-effect"><p class="may">ООО Май</p></div>
        </div>
        <div class="right-main col-lg-9 col-md-9 col-sm-12 col-xs-12">
            <div class="inner-container">
                <h1>Ottogi</h1>
                <h2>Южно - Корейские продукты питания высочайшего качества!</h2>
            </div>
4
  • А что именно у вас не работает? У меня всё переключается. Вы в каком браузере проверяете? Ну кроме Safari, в Safari у меня и верства поехала... 6 авг 2017 в 8:25
  • @AlexanderBragin у вас работает потому му что на сайте используется старый скрипт который показан выше, сейчас я его отключу и можете посмотреть 6 авг 2017 в 8:27
  • сейчас посмотрю. 6 авг 2017 в 8:30
  • прошу прощение за долгий ответ. Пришлось инструмент перехвата трафика ставить, чтобы можно было прям на вашем сайте результат изменений смотреть. Написал в ответ. Это касаемо изменения заголовков. Посмотрите: такой вариант устроит? Не совсем понял для чего вы объект объявляли — что-то дальше предполагалось делать? 6 авг 2017 в 9:48

2 ответа 2

2

Вместо

const selectorToResponse = {
  '.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
const $header = $('.inner-container h1')

for (const 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 ==
      const response = selectorToResponse[selector]

      $header.text(response)
    }
  }
}

Сократить код следующим образом

Получаете значение из текста меню и выводите его в заголовок.

$(function () {

    var header = $('.inner-container h1');

    $('.shadow-effect p').click(function () {
        header.text($(this).text());
    });

});
2
  • Спасибо большое!!! Такое простое решение! ) 6 авг 2017 в 10:02
  • @nk-montreal пожалуйста! Будут ещё вопросы — задавайте. 6 авг 2017 в 10:16
0

//может вообще можно без объекта обойтись? зачем сущности плодить без надобности?
selectorToResponse.forEach(function (i){
  addEventListener("click", function(){
    if ($header.text() === 'Ottogi') { // using === instead of ==
      const response = selectorToResponse[selector]
      $header.text(response)
    }
  });
});

А зачем вы selector как константу объявляете? да еще внутри цикла?

2
  • така как значение констант не может быть изменено новым присваиванием, и не может быть переопределено. Хочу использовать правило хорошего тона так сказать. Здесь есть более подробное описание почему developer.mozilla.org/en/docs/Web/JavaScript/… 6 авг 2017 в 8:39
  • но в цикле же как раз происходит присваивание с каждой итерацией. Вы же скрипт не обманете))) Он понимает это так, константа - ее менять не надо берем массив и пытаемся изменить ... константу...(или я чего то не понимаю?) Попробуйте без констант обойтись 6 авг 2017 в 8:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.