Блог

Главная - Вопросы по программированию - Щелчок по изображениям для передачи имен в строке URL-адреса

Щелчок по изображениям для передачи имен в строке URL-адреса

#javascript #html #jquery

Вопрос:

У меня низкий уровень знаний javascript, и я пытаюсь создать базовую викторину на основе изображений, которая передает данные обратно на страницу поиска для местных предприятий.

Каждое изображение будет иметь свой собственный «тег» в качестве идентификатора изображения, относящегося к одному из параметров поиска. Т. е. На открытом воздухе, в бальном зале, Сарае, саду и т. Д.

После отправки он отправит данные выбранного идентификатора изображения на www.sitename/search/?_характеристики=TAG1,TAG2,TAG3

Эта страница поиска будет фильтровать списки компаний по тегам. В настоящее время функция поиска фильтрует предприятия в следующем формате: website.com/search/?_характеристики=TAG1,TAG2

HTML будет выглядеть следующим образом:

 lt;img src="http://website.com/image1" id="TAG1"/gt;  lt;br/gt;  lt;img src="http://website.com/image2" id="TAG2"/gt;   lt;form action="https://website.com/business/?amp;_characteristics=TAG1, TAG2, TAG3" method="get"gt; lt;input type="submit" value="View Selected"/gt;

Комментарии:

1. Ваш вопрос не очень ясен. Откуда берутся метки ? Когда они должны быть добавлены в URL-адрес, и когда и как запрос отправляется на сервер?

2. Добро пожаловать в Stack Overflow. Я пытаюсь понять, чего вы хотите достичь, но я не знаю, полностью ли я понимаю, что вы говорите. Вы говорите о AJAX вызове или HTTP звонке с надписью «отправить данные»?

3. @Фил Я обновил пост, чтобы быть немного более ясным. Теги-это атрибуты на бизнес-страницах, которые будет фильтровать страница поиска. Я хочу, чтобы пользователи нажимали на изображения, соответствующие этим атрибутам, таким как ресторан с креслами на открытом воздухе, бизнес с Wi-Fi или место с кондиционером. Эти теги будут идентификаторами изображений, которые затем будут переданы по URL-адресу на страницу поиска.

4. Вы не ответили на мои комментарии по поводу сроков. Кроме того, что произойдет, если щелкнуть по изображению несколько раз? Как пользователи должны знать, выбрано изображение или нет?

5. @Phil Для определения времени, когда пользователь нажимает «Отправить», он кодирует строку URL-адреса и выводит их на страницу поиска. Для выбранных изображений это изменит класс изображения, которое будет выделено. Если они щелкнут по нему еще раз, он будет снят и вернется в состояние по умолчанию.

Ответ №1:

Что вам нужно, так это следующее

  1. Зарегистрируйте обработчик кликов на своих изображениях, чтобы
    1. Захват идентификаторов в коллекцию (массив или набор)
    2. Переключите класс «выбранный»
  2. Зарегистрируйте обработчик отправки в форме, чтобы ввести скрытый элемент ввода, преобразовав коллекцию тегов в CSV и установив для нее входное значение
 const form = document.querySelector("form") const tags = new Set()  document.querySelectorAll("img[id]").forEach(img =gt; {  img.addEventListener("click", () =gt; {  const selected = img.classList.toggle("selected")  tags[selected ? "add" : "delete"](img.id)  }) })  form.addEventListener("submit", (e) =gt; {  const input = Object.assign(document.createElement("input"), {  name: "_characteristics",  type: "hidden",  value: ([...tags]).join(",")   })    form.append(input)   // this is just for the example, omit the following  e.preventDefault()  console.log(`Submitting to ${form.action}?${new URLSearchParams(new FormData(form))}`)  input.remove() }) 
 img { border: 2px solid grey; } img.selected { border-color: red; } 
 lt;img src="https://picsum.photos/100" id="TAG1"/gt; lt;br/gt; lt;img src="https://picsum.photos/100" id="TAG2"/gt;   lt;form action="https://website.com/business/" method="get"gt; lt;input type="submit" value="View Selected"/gt; lt;/formgt;

Комментарии:

1. Это сработало великолепно — спасибо!

Ответ №2:

Я не уверен , как вы хотите получить выбранный img , но вот способ сделать это:

  1. Добавьте класс active в выбранный img
  2. При нажатии на button , получите id и вставьте его в output массив
  3. Создайте ссылку на теги ( id ы)

Прочитайте комментарии ниже для подробного объяснения.

 // Get the images and the submit button let images = document.querySelectorAll('img'); let btn = document.getElementById('btn'); // Array to hold the tags let output = []; // variable to hold the link let link = '';  // Add the class active to the selected images for(let i = 0; i lt; images.length; i  ) {  // For each image onclick:  images[i].addEventListener('click', () =gt; {  // Toggle the `active` class on click  images[i].classList.toggle('active');  }); }  // Button onclick: btn.addEventListener('click', () =gt; {  for(let i = 0; i lt; images.length; i  ) {  // Get the images with the `active` class and push the id to the output array   images[i].classList.contains('active') ? output.push(images[i].getAttribute('id')) : '';  }    // Remove duplicates if found  let uniq = [...new Set(output)];    // Create the link by adding the tags to the string (output values)  link = `www.sitename/search/?_characteristics=${uniq.join(',')}`;    // Print the link to the console  console.log(link); }); 
 img.active {  box-shadow: 0 0 1px 1px #121212; } 
 5. lt;img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128amp;d=identiconamp;r=PG" id="air-conditioned"/gt; lt;br/gt;  6. lt;img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128amp;d=identiconamp;r=PG" id="outdoor"/gt; lt;br/gt;  7. lt;img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128amp;d=identiconamp;r=PG" id="indoor"/gt; lt;br/gt;  8. lt;img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128amp;d=identiconamp;r=PG" id="house"/gt; lt;br/gt;  lt;button id="btn"gt;Submitlt;/buttongt;
Метки: