使用 jQuery 检查表 th 是否具有属性值

Question

我正在尝试在窗口调整大小和加载时显示内容。之后table th单击属性等于给定值。我不知道我哪里做错了，但我无法得到结果。

$(window).on("load resize", function(e) {
var $theWindowSize = $(this).width();
if ($theWindowSize < 768) {
alert($theWindowSize);
if ($('table th').attr('id') == 'basic-tab') {
$('table th#basic-tab').on('click', function(e) {
alert('basic');
$('table .basic-content').css('display', 'block');
});
} else if ($('table th').attr('id') == 'standard-tab') {
$('table th#standard-tab').on('click', function(e) {
alert('standard');
$('table .standard-content').css('display', 'block');
});
}
}
});

.basic-content,
.standard-content {
dispaly: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th id="basic-tab">Tab1</th>
<th id="standard-tab">Tab2</th>
</tr>
<tr class="basic-content">
<td>Basic Content</td>
</tr>
<tr class="standard-content">
<td>Standard Content</td>
</tr>
</table>

Answer 1

单击th获取id，将其拆分并获取第一部分，然后检查哪些tr包含class从此string开始并包含content。在此应用CSS。

工作片段：-

$('table th').on('click',function(e){
var thId = $(this).attr('id');
var compare = thId.split('-')[0];
$('tr').each(function(){
if($(this).attr('class') != undefined){
$(this).css('display','none');
}
});
$('tr[class*='+compare+'-content]').css('display','block');
});

.basic-content,.standard-content{
display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th id="basic-tab">Tab1</th>
<th id="standard-tab">Tab2</th>
</tr>
<tr class="basic-content">
<td>Basic Content</td>
</tr>
<tr class="standard-content">
<td>Standard Content</td>
</tr>
</table>

注意：- 根据您的 HTML 在代码$('tr[class*='+compare+'-content]')中添加了content。 如果您需要将 CSS 添加到所有包含basic或standered的人 那里 类 然后从代码中删除content并使其$('tr[class*='+compare+'-]').

Answer 2

$(".th"( 只返回第一个元素，所以让我们单独尝试：

$(".th").eq(n) 

$(window).on("load resize", function(e) {
var $theWindowSize = $(this).width();
if ($theWindowSize < 768) {
alert($theWindowSize);
if ($('table th').eq(0).attr('id') === 'basic-tab') {
$("body").on('click','table th#basic-tab', function(e) {
alert('basic');
$('table .basic-content').css('display', 'block');
});
} if ($('table th').eq(1).attr('id') === 'standard-tab') {
$('body').on('click','table th#standard-tab',function(e) {
alert('standard');
$('table .standard-content').css('display', 'block');
});
}
}
});

.basic-content,
.standard-content {
dispaly: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th id="basic-tab">
Tab1
</th>
<th id="standard-tab">
Tab2
</th>
</tr><tr>
<div class="basic-content">
<td>Basic Content</td></div>
<div class="standard-content">
<td>Standard Content</td>
</div>
</tr>
</table>