我有一个包含多个具有相同类的div的页面,我想为所有div动态添加折叠类。
我的html:
<div class="section-title"></div>
<div class="section-text"></div>
<div class="section-title"></div>
<div class="section-text"></div>
<div class="section-title"></div>
<div class="section-text"></div>
我的jQuery:
var numItems = $('。section-title')。length;
var i;
for(i='0';i<numItems;i++) {
$(".section-title ").attr("data-toggle", "collapse");
$(".section-title ").attr("data-target", "#collapseOne"+i);
$(".section-text ").attr("data-toggle", "collapse");
$(".section-text").attr("id", "collapseOne"+i);
}
但这不起作用,因为我想为div附加collpaseOne1,collpaseOne2,collpaseOne3类,但它为所有div附加collpaseOne3。
像这样
$(function(){
const $sections = $('.section-title')
for (let i = 0; i< $sections.length; i++){
const $section = $sections.eq(i)
const $sectionText = $section.next()
$section.text(`Section ${i}`)
$sectionText.text(`Section Text ${i}`)
const targetId = `section_${i}`
$sectionText.attr('id',targetId)
$sectionText.addClass('collapse')
$section.attr('data-toggle','collapse')
$section.attr('data-target',`#${targetId}`)
}
})
.section-title{
font-weight:bold;
cursor:pointer;
padding:.5em;
}
.section-text{
padding:.5em;
margin-bottom:1em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="section-title"></div>
<div class="section-text"></div>
<div class="section-title"></div>
<div class="section-text"></div>
<div class="section-title"></div>
<div class="section-text"></div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句