單擊影像以在URL字串中傳遞名稱

我對 javascript 的了解很低，正在嘗試創建一個基于影像的基本測驗，將資料傳回本地企業的搜索頁面。

每個影像都有自己的“標簽”作為與搜索中的選項之一相關的影像 ID。IE。戶外、宴會廳、谷倉、花園等。

提交后，它會將所選影像ID的資料發送到www.sitename/search/?_characteristics=TAG1,TAG2,TAG3

該搜索頁面將按標簽過濾企業串列。目前它的搜索功能按以下格式過濾業務：website.com/search/?_characteristics=TAG1,TAG2

HTML 將如下所示：

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

uj5u.com熱心網友回復：

我不確定你想如何獲得 selected img，但這是一種方法：

1. 將類添加active到選定的img
2. 單擊 時button，獲取id并將其推送到output陣列
3. 創建標簽的鏈接( id's)

閱讀下面的評論以獲得詳細的解釋。

// 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 < images.length; i  ) {
  // For each image onclick:
  images[i].addEventListener('click', () => {
    // Toggle the `active` class on click
    images[i].classList.toggle('active');
  });
}

// Button onclick:
btn.addEventListener('click', () => {
  for(let i = 0; i < 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. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="air-conditioned"/>
<br/>

6. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="outdoor"/>
<br/>

7. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="indoor"/>
<br/>

8. <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" id="house"/>
<br/>

<button id="btn">Submit</button>

uj5u.com熱心網友回復：

你想要的是以下

1. 在您的影像上注冊一個點擊處理程式
   1. 將 id 捕獲到集合（陣列或集合）中
   2. 切換“選定”類
2. 在表單上注冊提交處理程式以注入隱藏的輸入元素，將標簽集合轉換為 CSV

const form = document.querySelector("form")
const tags = new Set()

document.querySelectorAll("img[id]").forEach(img => {
  img.addEventListener("click", () => {
    const selected = img.classList.toggle("selected")
    tags[selected ? "add" : "delete"](img.id)
  })
})

form.addEventListener("submit", (e) => {
  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; }

<img src="https://picsum.photos/100" id="TAG1"/>
<br/>
<img src="https://picsum.photos/100" id="TAG2"/>
    
<form action="https://website.com/business/" method="get">
<input type="submit" value="View Selected"/>
</form>

標籤：javascript html 查询

上一篇：將產品添加到mongoDB時出現此錯誤

下一篇：電話號碼的正則運算式允許9或10位數字