整个上午都在这,我就是无法让它做我想做的事。
我一直在使用 jQuery,我只是在学习。
我的页面有 6 个部分,一些有 id,有些没有。他们都共享同一个类。
我的目标是找到每个部分并将 ID 设置为特定值。“A”“B”等等....我不知道如何完成这个,所以我的计划是创建一个循环并将id设置为“section1”“section2”.....然后回去并将它们更改为文本值。
不理想,无论如何它都不起作用。这就是我所做的,结果是所有的部分 ID 都设置为“section5”。
我明白为什么它正在做它正在做的事情。循环正在查找部分并将所有 id 设置为“section0”,然后重新开始。我只是不知道如何解决它。
此外,将 id 从“section5”更改为“F”也不起作用。
<script>
$(document).ready( function () {
for(var i=0;i<6;i++){
$('section.page-section').attr('id','section'+i+'');
}
$('#section0').attr('id', 'A');
$('#section1').attr('id', 'B');
$('#section2').attr('id', 'C');
$('#section3').attr('id', 'D');
$('#section4').attr('id', 'E');
$('#section5').attr('id', 'F');
});
</script>
提前致谢!
您正在选择每个循环上的所有元素,而不是要更改的索引处的当前元素。
var sections = $('section.page-section')
for (var i = 0; i < 6; i++) {
sections.eq(i).attr('id', 'section' + i + '');
}
$('#section0').attr('id', 'A');
$('#section1').attr('id', 'B');
$('#section2').attr('id', 'C');
$('#section3').attr('id', 'D');
$('#section4').attr('id', 'E');
$('#section5').attr('id', 'F');
.page-section::before {
content: attr(id)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
我将如何使用 attr 方法为您提供索引。你返回的是它会设置的。并做了一个功能,这样你就不必硬编码选择器来设置字母。
function genChar(offset) {
var start = "A".charCodeAt(0);
return String.fromCharCode(start + offset);
}
var sections = $(".page-section").attr("id", function (index) {
return genChar(index)
})
.page-section::before {
content: attr(id)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
<section class="page-section"></section>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句