Как написать такую функцию?

Question

lemonlimelike @lemonlimelike

JavaScript

Как написать такую функцию?

Всем привет! На странице выводится записи. Есть js скрипт который берет нужное поле и делает с ним разные махинации. Как мне этот скрипт записать в функцию и просто передавать из каждой записи нужное поле, а затем выводить то что получилось? Вот скрипт:

var divGenre = document.querySelector('#genre{!!$item->id!!}');
  var genres = '{!!$item->genre!!}'.split(', ');
  genres.forEach((el,index) =>{
    let a = document.createElement('a');
    a.setAttribute('href', '/category/'+el);
    a.setAttribute('class','content__box__genre--links');
      a.innerText = el+' ';
      divGenre.appendChild(a);
  });

Сделал так, но оно не работает:

Вопрос задан более трёх лет назад
222 просмотра

7 комментариев

Подписаться 1 Простой 7 комментариев

Родион Мещеряков @rodionme

Этот скрипт принимает строку, создает из нее массив, разбивая по запятым. Потом для каждого элемента массива создает ссылку.

Чтобы это заработало, нужно вызывать например так:
addGenre('Rock, Jazz, Blues');
в том же скрипте, где написана сама функция.

То, что вы написали внутри span работать точно не будет, потому что передана строка, которую скрипт не ожидает.

Я так понимаю, что есть div, который виден на скриншоте. В него планируется запихнуть несколько ссылок, созданных этим скриптом?

Написано более трёх лет назад
lemonlimelike @lemonlimelike Автор вопроса

Родион Мещеряков,
Я так понимаю, что есть div, который виден на скриншоте. В него планируется запихнуть несколько ссылок, созданных этим скриптом?

Да
Я подумал, что если вызвать функцию в этом span, то функци покажет результат, но он не показался:(

Написано более трёх лет назад
lemonlimelike @lemonlimelike Автор вопроса

Родион Мещеряков, И да, в функцию передается строка такого вида, как вы написали. {!!$item->genre!!} это из laravel

Написано более трёх лет назад
alex @potapchino

lemonlimelike,
но оно не работает
а как эта функция по вашему должна была отработать?

Написано более трёх лет назад
lemonlimelike @lemonlimelike Автор вопроса

Alex, Ну она должна разбить строку на массивы и потом из каждого элемента массива создать ссылку и полученное запихнуть в тег span, там где я вызвал функцию. И у меня тут идея, дать span'у индентификатор и в функции находить этот спан(ибо он не один) и запихивать данные в него? Это будет норм ход?)

Написано более трёх лет назад
alex @potapchino

lemonlimelike,
и полученное запихнуть в тег span
ткните меня носом в то место на скриншоте, где функция запихивает полученную ссылку в span

Написано более трёх лет назад
Родион Мещеряков @rodionme
lemonlimelike, Я понял, что {!!$item->genre!!} - это из php. Но JS не знает как работать с PHP. Или PHP генерирует в том месте строку нужного вида?

Вот так примерно это должно выглядеть в итоге:
let divGenre = document.querySelector("#genre"); function addGenre(text) { let genres = text.split(", "); genres.forEach((el, index) => { let a = document.createElement("a"); a.setAttribute("href", "/category/" + el); a.setAttribute("class", "content__box__genre--links"); a.innerText = el + " "; divGenre.appendChild(a); }); } addGenre('rock, jazz, blues')

А уж как это будет с примесью php - вам виднее
Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Как посчитать количество пересечений с помощью метода filter?
- 1 подписчик
- 14 часов назад
- 139 просмотров
3

ответа
JavaScript

Простой
Как реализовать логику назад вперед?
- 1 подписчик
- 16 часов назад
- 89 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- вчера
- 135 просмотров
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 56 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 201 просмотр
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 23 нояб.
- 109 просмотров
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 729 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 22 нояб.
- 78 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 22 нояб.
- 45 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 22 нояб.
- 35 просмотров
0

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Перенести сайт с правками на другую платформу

26 нояб. 2024, в 10:57

40000 руб./за проект

Распознать подделку PDF файла от оригинального чека PDF

26 нояб. 2024, в 10:25

300000 руб./за проект

Нужно найти список всех 2-5 этажек рф

26 нояб. 2024, в 10:24

500 руб./за проект

Этот скрипт принимает строку, создает из нее массив, разбивая по запятым. Потом для каждого элемента массива создает ссылку.

Чтобы это заработало, нужно вызывать например так:
addGenre('Rock, Jazz, Blues');
в том же скрипте, где написана сама функция.

То, что вы написали внутри span работать точно не будет, потому что передана строка, которую скрипт не ожидает.

Я так понимаю, что есть div, который виден на скриншоте. В него планируется запихнуть несколько ссылок, созданных этим скриптом?
Родион Мещеряков,
Я так понимаю, что есть div, который виден на скриншоте. В него планируется запихнуть несколько ссылок, созданных этим скриптом?

Да
Я подумал, что если вызвать функцию в этом span, то функци покажет результат, но он не показался:(
Родион Мещеряков, И да, в функцию передается строка такого вида, как вы написали. {!!$item->genre!!} это из laravel
lemonlimelike,
но оно не работает
а как эта функция по вашему должна была отработать?
Alex, Ну она должна разбить строку на массивы и потом из каждого элемента массива создать ссылку и полученное запихнуть в тег span, там где я вызвал функцию. И у меня тут идея, дать span'у индентификатор и в функции находить этот спан(ибо он не один) и запихивать данные в него? Это будет норм ход?)
lemonlimelike,
и полученное запихнуть в тег span
ткните меня носом в то место на скриншоте, где функция запихивает полученную ссылку в span
lemonlimelike, Я понял, что {!!$item->genre!!} - это из php. Но JS не знает как работать с PHP. Или PHP генерирует в том месте строку нужного вида?

Вот так примерно это должно выглядеть в итоге:
let divGenre = document.querySelector("#genre"); function addGenre(text) { let genres = text.split(", "); genres.forEach((el, index) => { let a = document.createElement("a"); a.setAttribute("href", "/category/" + el); a.setAttribute("class", "content__box__genre--links"); a.innerText = el + " "; divGenre.appendChild(a); }); } addGenre('rock, jazz, blues')

А уж как это будет с примесью php - вам виднее

Answer 1 · 2019-02-19 23:49:17

<body>
  <div><span class="span" data-genres="a, b, c"></span></div>
  <div><span class="span" data-genres="d, e, f"></span></div>
  <div><span class="span" data-genres="g, h, i"></span></div>
  <div><span class="span" data-genres="j, k, l"></span></div>
  
  <script>
    function addGenres(genres, container) {
      genres.split(', ').forEach(genre => {
        const linkNode = document.createElement('a');
        const textNode = document.createTextNode(genre);

        linkNode.setAttribute('href', `/category/${genre}`);
        linkNode.setAttribute('class', 'content__box__genre--links');
        linkNode.appendChild(textNode);

        container.appendChild(linkNode);
      })
    }
  </script>
  <script>
    document.querySelectorAll('.span').forEach(el => {
      addGenres(el.dataset.genres, el)
    })
  </script>
</body>

Как написать такую функцию?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт