Jquery 根据单元格加载不同的 HTML 内容

Question

我有以下代码，它基本上允许 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>

Answer 1

td 级别的数据内联

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

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

});

td {

  border: solid 1px #cccccc;

  padding: 5px;

}

.data-cell { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>

<div id="popup"></div>

Answer 2

一个想法：您可以为每个单元格提供一个带有索引号的数据属性，然后使用它来引用包含相关标记的数组：

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;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <tr>

    <td class="data-cell" data-index="0">A</td>

    <td class="data-cell" data-index="1">B</td>

    <td class="data-cell" data-index="2">C</td>

    <tr>

</table>

<div id="popup"></div>

对此还有许多其他可能的解决方案，这可能取决于数据最初来源的确切情况。

Answer 3

好吧，这完全取决于您如何维护单击的单元格与其应显示的 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：

<td class="data-cell" id=cell-1></td>

<td class="data-cell" id=cell-2></td>

<!-- etc -->

另请注意，我使用委托事件处理，而不是分别绑定到每个单元格。由于超出本问题范围的各种原因，这是可取的，但这里有一些信息。