Question

如果我想根据ID更改移动表的内容，这将不起作用，因为代码中的ID仍存储在两个表中。它永远是第一张桌子。

<!-- Desktop -->
<table class="hidden-xs">
	<tr>
		<td><span id="my_id">content</span></td>	
	<tr>
</table>

<!-- Mobile -->
<table class="hidden-sm hidden-md hidden-xl hidden-lg">
	<tr>
	  <td><span id="my_id">content</span></td>	
	<tr>
</table>

如何根据分辨率更改正确的表格内容？

Answer 1

您可以使用class代替id，它将解决此问题

<!-- Desktop -->
<table class="hidden-xs">
    <tr>
        <td><span class="content" id="my_id">content</span></td>    
    <tr>
</table>

<!-- Mobile -->
<table class="hidden-sm hidden-md hidden-xl hidden-lg">
    <tr>
      <td><span class="content" id="my_id">content</span></td>  
    <tr>
</table>

然后您可以使用jQuery进行更改：

$('.content').html('New content');

Answer 2

您可以先选择可见表，然后找到.content，例如：

$('table:visible').find('.content').css('color', 'red');

.hidden-xs {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Desktop -->
<table class="hidden-xs">
    <tr>
        <td><span class="content">Desktop</span></td>    
    <tr>
</table>

<!-- Mobile -->
<table class="hidden-sm hidden-md hidden-xl hidden-lg">
    <tr>
      <td><span class="content">Mobile</span></td>  
    <tr>
</table>

注意：您不应重复使用相同的ID，ID应该是唯一的。尝试改用类名。

如何根据分辨率更改具有相同ID的表内容？

2 个答案: