我正在使用jQuery Steps library但我的表单结构已生成,我无法更改它。我有一个与此类似的结构:
<form method="POST" action="#" id="form">
<div>
<div>some necessary content</div>
<div>some necessary content</div>
<div id="" class="wrapper" data-name="group">
<div class="another-class">
<label>Group</label>
</div>
<div class="some-other-class">
more codes
</div>
</div>
<div id="" class="wrapper" data-name="group">
<div class="another-class">
<label>Group</label>
</div>
<div class="some-other-class">
more codes
</div>
</div>
<div class="submit">
<button type="submit">Submit</button>
</div>
</div>
</form>
问题是 jQuery Steps 不支持标题和内容的包装器
$("#form").steps({
headerTag: ".wrapper label",
bodyTag: ".wrapper .some-other-class",
transitionEffect: "slideLeft",
autoFocus: true
});
这是我的第一次尝试:fiddle 这也是我的第二次尝试:fiddle
所以我想要每个 wrapper
div 都有一个步骤,标签作为步骤的标题,但我无法让它工作。
最佳答案
你需要操作 JS 生成的 DOM 和元素来给他正确的结构。
// Insert new div contains your steps
$('<div id="steps"></div>').insertBefore('.submit');
// Loop each step
$('.wrapper').each(function(){
// Add to steps container, the title
$('#steps').append('<div class="title">' + $(this).find('label').text() + '</div>');
// Add to steps container, the content
$('#steps').append('<div class="content">' + $(this).find('.some-other-class').html() + '</div>');
// Remove useless code
$(this).remove();
});
// Now, you have the right structure, you can fire your lib script
$("#steps").steps({
headerTag: ".title",
bodyTag: ".content",
transitionEffect: "slideLeft",
autoFocus: true
});
关于javascript - JQuery 步骤包装器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58634547/