Как изменять код в зависимости от того, какой элемент ты выбрал?

Question

У меня интернет магазин, хочу изменять элемент кода в зависимости от того, какую фирму я выбрал.

Для наглядности вот мои 4 фирмы: Estel, Epica, Kapous, Constant Delight. Мне нужно чтоб я выбрала одну из фирм(перешел по ней) и изменялся код, сейчас объясню, где и зачем.

Данные всех товаров находятся в едином файле, для того чтобы эти данные разделять (данные товара, это его расположение название, фото) я ограничил все данные четырьмя переменными: catalogEstel, catalogEpica, catalogKapous, catalogConstant_Delight. А ограничил я для того чтоб в своей фирме, был свой товар(раньше у меня все товары были и в Estel, Epica, Kapous, Constant Delight и не было никаких разграничений).

Код который все это выводит выглядит это следующим образом:

    CATALOG.forEach(({id, name, price, img}) => {
    let activeClass = '';
    let activeText = '';

    if (productsStore.indexOf(id) === -1) {
        activeText = this.labelAdd;
    } else {
        activeClass = ' '+this.classNameActive;
        activeText = this.labelRemove;
    }

Если в начала написать допустим catalogEstel, то Estel и будет выводиться. Мне нужно чтоб когда пользователь переходил на Estel код менялся на:

catalogEstel.forEach(({id, name, price, img}) => {

Когда переходил на Epica код становился:

catalogEpica .forEach(({id, name, price, img}) => {

И так было еще с Kapous и с Constant_Delight.

Для наглядности прикреплю фотографии чтоб было понятнее, заранее большое спасибо, сама разобраться не могу.

И я думала сделать если так получиться, то это было бы лучшим решение для меня: У меня есть onclick на вот этих четырёх фирмах, возможно ли сделать onclick который будет изменять переменную, а именно её название. То есть при клики на Estel, каталог заменяется на catalogEstel. Клик на Epica, каталог изменяется на catalogEpica.

Рис1

Answer 1

Передавайте в свою функцию нужный вам объект

html:

<button class="logo" data-target="Estel">Estel</button>
<button class="logo" data-target="Epica">Epica</button>

Js:

let objectName = {
  "Epica": {
    "id": 1,
    "name" : "Notebook",
    "price": 10,
    "img": "url"
  },
  "Estel": {
    "id": 2,
    "name" : "Notebook",
    "price": 100,
    "img": "url"
  }
};

$(document).ready(function(){
   $('.logo').on('click', function(e){
          you_function($(this).data("target"))
   })
})

function you_function(name){
    console.log(objectName[name])
}

Добавлено. Если ваше событие висит на onclick, тогда так:

Html:

<button onclick="you_function('Estel')">Estel</button>
<button onclick="you_function('Epica')">Epica</button>

Js

    let objectName = {
      "Epica": {
        "id": 1,
        "name" : "Notebook",
        "price": 10,
        "img": "url"
      },
      "Estel": {
        "id": 2,
        "name" : "Notebook",
        "price": 100,
        "img": "url"
      }
    };

    function you_function(name){
        console.log(name) // имя
        console.log(objectName[name]) // вывод конкретного объекта
    }

БЛОГ НА HUSL

Как изменять код в зависимости от того, какой элемент ты выбрал?

Ответы (1 шт):