javascript - 我想将 HTML 元素连接到 javascript 对象

Question

对于页面上的每个产品<img>元素，我想创建一个关联的 JavaScript 对象，其属性为title、description和price。单击时<img>，它应该显示一个基于 HTML 模板的模式，其中的字段由这些属性填充。

这是我当前的代码：

document.getElementById("red").onclick = function() {functionRed()};
document.getElementById("yellow").onclick = function() {functionYellow()};
document.getElementById("blue").onclick = function() {functionBlue()};

// Create an object:
var Blue = {Title:"BlueIsTheNewBlack", Price:"500", Description:"This blue is the best color"}
var Yellow = {Title:"YellowIsTheNewBlack", Price:"900", Description:"This yellow is the best color"}
var Red = {Title:"RedIsTheNewBlack", Price:"100", Description:"This red is the best color"}

function functionRed() {
  document.getElementById('id01').style.display='block';
// Display some data from the object:
  document.getElementById("TitleModal").innerHTML = Red.Title;
  document.getElementById("PriceModal").innerHTML = Red.Price;
  document.getElementById("DescriptionModal").innerHTML = Red.Description;
}

function functionYellow() {
  document.getElementById('id01').style.display='block';
// Display some data from the object:
  document.getElementById("TitleModal").innerHTML = Yellow.Title;
  document.getElementById("PriceModal").innerHTML = Yellow.Price;
  document.getElementById("DescriptionModal").innerHTML = Yellow.Description;
}

function functionBlue() {
  document.getElementById('id01').style.display='block';
// Display some data from the object:
  document.getElementById("TitleModal").innerHTML = Blue.Title;
  document.getElementById("PriceModal").innerHTML = Blue.Price;
  document.getElementById("DescriptionModal").innerHTML = Blue.Description;
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div style="background-color:red; width:50px; height:50px; float: left;" id="red"></div>
<div style="background-color:blue; width:50px; height:50px; float: left;" id="blue"></div>
<div style="background-color:yellow; width:50px; height:50px; float: left;" id="yellow"></div>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <h2 id="TitleModal">Some text. Some text. Some text.</h2>
        <h2 id="PriceModal">Some text. Some text. Some text.</h2>
        <p id="DescriptionModal">Some text. Some text. Some text.</h2>
      </div>
    </div>
  </div>
</div>

谢谢大家。

标签： javascripthtml

Answer 1

这是你所期望的吗？

const SquareColors
        = document.getElementById('ColorsChoices')
  ,   SquareMessage
        = { onRed    : { Title: 'RedIsTheNewBlack',    Price: '100', Description: 'This red is the best color'    }
          , onBlue   : { Title: 'BlueIsTheNewBlack',   Price: '500', Description: 'This blue is the best color'   }
          , onYellow : { Title: 'YellowIsTheNewBlack', Price: '900', Description: 'This yellow is the best color' }
          }
  ,   Modal_info
        = document.getElementById('idModal')
  ;
Modal_info.show=_=>Modal_info.classList.remove('noDisplay') 
Modal_info.hide=_=>Modal_info.classList.add('noDisplay')

idModal.onclick=e=>
  {
  if (!e.target.matches('#close-button, #idModal')) return
  e.preventDefault()
  Modal_info.hide()
  }
const TitleModal      = document.getElementById('TitleModal')
  ,   PriceModal      = document.getElementById('PriceModal')
  ,  DescriptionModal = document.getElementById('DescriptionModal')
  ;
SquareColors.onclick=e=>
  {
  if (!e.target.matches('.colorButton')) return

  let inColor = e.target.id

  TitleModal.textContent       = SquareMessage[inColor].Title
  PriceModal.textContent       = SquareMessage[inColor].Price
  DescriptionModal.textContent = SquareMessage[inColor].Description

  Modal_info.show()
  }

nav#ColorsChoices div {
  width : 50px;
  height: 50px;
  float : left;
}
#onRed    { background-color: red    }
#onBlue   { background-color: blue   }
#onYellow { background-color: yellow }

.noDisplay { display: none }

#idModal {
  z-index: 3;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color:   rgba(0,0,0,0.4);
}
#idModal > div {
  position: relative;
  display: block;
  width: 30em;
  margin: 5em auto;
  background-color: #fff;
  padding: 1em;
}
#close-button {
  position: absolute;
  top: 0;
  right: .3em;
  cursor: pointer;
  font-size: 2em;
  font-weight: bold;
}
#close-button:hover { color: crimson; }

<nav id="ColorsChoices">
  <div class="colorButton" id="onRed"></div>
  <div class="colorButton" id="onBlue"></div>
  <div class="colorButton" id="onYellow"></div>
</nav>


<div id="idModal" class="noDisplay">
  <div>
    <span id="close-button">&times;</span>
    <h2 id="TitleModal">Some text. </h2>
    <h2 id="PriceModal">Some text. </h2>
    <p id="DescriptionModal">Some text. </h2>
  </div>
</div>