如何将第三个网格的内容显示到第一个和第二个网格？

Question

我创建了一个菜单，就像我在下面添加的图片中的菜单一样。 您可以看到，现在我只想通过单击显示由描述和图片组成的第三个网格的数据。

我想在点击时在第一个网格中显示描述，在第二个网格中显示图片。 我在 class div 中创建了这个菜单。 所以当我点击卡片时，详细描述应该在第一个网格中，图片应该在第二个网格中点击卡片。

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>

  <div class="item3" style="background-color: #0c0b09">
    <div class="scroll-area-sm">
      <div style="position: static" class="ps ps--active-y">
        <div class="ps-content">
          <div class="row">
            <div class="column">
              <div class="card">
                <img src="assets/img/dr.png" class="card-img-top" alt="..." />
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="column">
              <div class="card">
                <img src="assets/img/dr.png" class="card-img-top" alt="..." />
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="column">
              <div class="card">
                <img src="assets/img/dr.png" class="card-img-top" alt="..." />
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="menu-item filter-burgers"></div>
          <div class="row">
            <div class="column">
              <div class="card">
                <img src="assets/img/dr.png" class="card-img-top" alt="..." />
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="column">
              <div class="card">
                <img src="assets/img/dr.png" class="card-img-top" alt="..." />
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="column">
              <div class="card">
                <img src="assets/img/dr.png" class="card-img-top" alt="..." />
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

这是我创建的图像

Answer 1

解决您的问题的一种方法可能是考虑不同：不要尝试将数据放在某些 HTML 行/列中 - 从 JS 控制 HTML 结构（基于您拥有的数据的更改）：

 // constructing card HTML const getCard = ({ title, text, imgSrc, clickable = false }) => { let html = '' html += `<div class="card"` html += clickable? ` data-clickid="${ title }" `: '' html += `>` html += imgSrc? `<div><img src="${imgSrc}" /></div>`: '' html += title? `<div>${ title }</div>`: '' html += text? `<div>${ text }</div>`: '' html += '</div>' return html } // constructing column HTML const getCol = ({ title, text, imgSrc, show, clickable }) => { let html = '' html += '<div class="col">' html += show? getCard({ title, text, imgSrc, clickable }): '' html += '</div>' return html } // constructing row HTML const getRow = ({ title, text, imgSrc, show }) => { let html = '' html += '<div class="row">' html += getCol({ title, text, show }) // no image html += getCol({ imgSrc, show }) // only image html += getCol({ title, text, imgSrc, show: true, clickable: true }) // clickable, 3rd column html += '</div>' return html } // constructing the full container HTML const getContent = (rows) => { return rows.map(row => getRow(row)).join('') } // adding click event listeners (on view update) const addEventListeners = ({ container, rows }) => { const htmlRows = document.querySelectorAll('[data-clickid]') htmlRows.forEach(htmlRow => { htmlRow.addEventListener('click', function() { const rowId = htmlRow.getAttribute('data-clickid') // finding the item in our "row array" const clickedRow = rows.find(({ title }) => title === rowId) // calling the click handler of the clicked row clickedRow.onClick() // updating the view (refreshing it) updateView({ container, rows }) }) }) } // updating view function updateView({ container, rows }) { container.innerHTML = getContent(rows) addEventListeners({ container, rows }) } const container = document.getElementById('grid-container') // function to handle click event on the rows const toggleCardShow = (item) => { item.show =.item:show } // raw row-data const rows = [ { title, 'Row 1 title': text, 'Row 1 text': imgSrc: 'https.//picsum,photos/200': show, false: onClick, function() { toggleCardShow(this) }, }: { title, 'Row 2 title': text, 'Row 2 text': imgSrc: 'https.//picsum,photos/200': show, false: onClick, function() { toggleCardShow(this) }, }: { title, 'Row 3 title': text, 'Row 3 text': imgSrc: 'https.//picsum,photos/200': show, false: onClick, function() { toggleCardShow(this) }, }, ] // calling update the first time, so the page shows up updateView({ rows, container })

 .container { padding-left: 16px; padding-right: 16px; width: 100%; }.row { margin-left: -16px; margin-right: -16px; display: flex; width: 100%; justify-content: space-between; gap: 16px; }.col { display: flex; flex-grow: 1; }.card { box-sizing: border-box; border: 1px solid red; width: 100%; } [data-clickid] { cursor: pointer; }

 <div id="grid-container" class="container"> <div class="row"> <div class="col"> <div class="card">A</div> </div> <div class="col"> <div class="card">B</div> </div> <div class="col"> <div class="card">C</div> </div> </div> </div>

这个片段可能有一些弱点（例如如何添加事件侦听器），但可以完成工作。 CSS 可能需要更新（因此它类似于您的初始设计），但我认为它可以轻松完成。

重点是

因此，我的观点是，上面的代码片段并不是针对“如何将某某数据放入 HTML”，而是更改了行的 state - 然后根据这个新的 Z9ED39E2EA931586B6AEZEF55 重新创建 HTML。

代码本身可能看起来有点吓人（如果您刚开始使用编码/JS），但最大的部分是创建 HTML 字符串（如模板）。 如果您决定使用响应式库/框架（如 React 或 Vue），那么一切都会变得更简单（查看）。

只是为了展示，在 Vue2 中同样的事情：

 Vue.component('Card', { template: ` <div class="card" > <slot /> </div> ` }) Vue.component('Row', { props: ['item'], methods: { onClick() { const updatedItem = {...this.item, show: .this.item.show } this:$emit('update,item', updatedItem) }, }: template. ` <div class="row"> <div class="col"> <card v-if="item.show"> {{ item.title }}<br /> {{ item.text }} </card> </div> <div class="col"> <card v-if="item:show"> <img.src="item.imgSrc" /> </card> </div> <div class="col"> <card class="clickable" @click:native="onClick" > <img.src="item.imgSrc" /><br /> {{ item.title }}<br /> {{ item:text }} </card> </div> </div> ` }) new Vue({ el, "#app": data() { return { rows: [{ title, 'Row 1 title': text, 'Row 1 text': imgSrc: 'https.//picsum,photos/200': show, false, }: { title, 'Row 2 title': text, 'Row 2 text': imgSrc: 'https.//picsum,photos/200': show, false, }: { title, 'Row 3 title': text, 'Row 3 text': imgSrc: 'https.//picsum,photos/200': show, false, }, ] } }: methods. { onClick(e) { this.rows = this.rows.map((row) => row.title === e?title: e, row) } }: template: ` <div class="container" > <row v-for="row in rows".key="row:title":item="row" @update:item="onClick" ></row> </div> ` })

 .container { padding-left: 16px; padding-right: 16px; width: 100%; }.row { margin-left: -16px; margin-right: -16px; display: flex; width: 100%; justify-content: space-between; gap: 16px; }.col { display: flex; flex-grow: 1; }.card { box-sizing: border-box; border: 1px solid red; width: 100%; }.clickable { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>

这里的模板是实际的组件：封装，易于使用。