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

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

+3 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 9 часов назад
- 51 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как отобразить массив из элементов?
- 1 подписчик
- 10 часов назад
- 73 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Неизвестные скрипты на сайте (plupload и moxie). Для чего?
- 1 подписчик
- 14 часов назад
- 101 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 15 часов назад
- 73 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- 16 часов назад
- 37 просмотров
1

ответ
JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- 23 часа назад
- 40 просмотров
1

ответ
JavaScript

Средний
Как создать кроссбраузерный функиональный плеер?
- 1 подписчик
- вчера
- 64 просмотра
0

ответов
JavaScript

+1 ещё

Средний
Почему функция mnemonicToWalletKey из библиотеки тон генерирует неверный адрес кошелька?
- 1 подписчик
- вчера
- 48 просмотров
1

ответ
JavaScript

+1 ещё

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

ответов
JavaScript

Простой
Проблема с добавлением полей товара в куки, почему-то при клике ничего в куки не записывает, что делать?
- 1 подписчик
- вчера
- 33 просмотра
2

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

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

summer • Ярославль

от 100 000 до 140 000 ₽

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

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

Мэтч

от 80 000 ₽

Настройка сервера

18 апр. 2024, в 21:56

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

Помощь с водпресс

18 апр. 2024, в 21:00

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

Спарсить ссылки на все товары конкретного продавца в озон

18 апр. 2024, в 20:13

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

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

Чтобы это заработало, нужно вызывать например так:
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>

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

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

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

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