首頁猿問 Jquery 根據單元格加載不同的...

Jquery 根據單元格加載不同的 HTML 內容

JavaScript

慕婉清6462132 2021-11-12 10:47:33

我有以下代碼，它基本上允許 pop 顯示 html。但是，我想從不同的單元格加載不同的內容，例如單元格 1 某個 html 代碼，cell2 不同等。我想添加 id= 并為每個單元格提供一個帶有 html 的 id，但不確定是否那樣有字符限制以及如何在彈出的 jquery 中調用它$(document).ready(function(){ $(".data-cell").click(function(){ $("#popup").html("Hello <b>world!</b>"); });});<div id="popup" class="popup-style">test</div><table><tr><td class="data-cell"></td><td class="data-cell"></td><td class="data-cell"></td><td class="data-cell"></td><td class="data-cell"></td><td class="data-cell"></td></tr>

查看完整描述

3 回答

素胚勾勒不出你

TA貢獻1827條經驗獲得超9個贊

td 級別的數據內聯

$('.key-cell').click(function() {

$("#popup").html($(this).next().html());

});

td {

border: solid 1px #cccccc;

padding: 5px;

}

.data-cell { display:none }

<table>

<tr>

<td class="key-cell">A</td><td class="data-cell">A: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>

<td class="key-cell">B</td><td class="data-cell">B: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>

<td class="key-cell">C</td><td class="data-cell">C: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>

<tr>

</table>

反對回復 2021-11-12

當年話下

TA貢獻1890條經驗獲得超9個贊

一個想法：您可以為每個單元格提供一個帶有索引號的數據屬性，然后使用它來引用包含相關標記的數組：

var data = [

'<div>Contents 1</div>',

'<span>Contents 2</span>',

'Contents 3',

]

$('.data-cell').click(function() {

$("#popup").html(data[$(this).data('index')]);

});

td {

border: solid 1px #cccccc;

padding: 5px;

}

<table>

<tr>

<tr>

</table>

對此還有許多其他可能的解決方案，這可能取決于數據最初來源的確切情況。

反對回復 2021-11-12

RISEBY

TA貢獻1856條經驗獲得超5個贊

好吧，這完全取決于您如何維護單擊的單元格與其應顯示的 HTML 之間的關系。有很多可能的答案。一種方法是維護要顯示的 HTML 地圖，每個地圖都鏈接到單元格 ID。

JS：

let map = {

'cell-1': '<p>Some HTML</p>',

'cell-2': '<p>Some other HTML!</p>'

/* etc */

}

$('body').on('click', '.data-cell', function() {

$("#popup").html(map[$(this).attr('id')]);

});

HTML：

另請注意，我使用委托事件處理，而不是分別綁定到每個單元格。由于超出本問題范圍的各種原因，這是可取的，但這里有一些信息。

反對回復 2021-11-12

3 回答
0 關注
217 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Jquery 根據單元格加載不同的 HTML 內容

Jquery 根據單元格加載不同的 HTML 內容

3 回答

添加回答