所以我有两个部分,一个fieldset
面板div
和一个“生成的内容” div
。我正在将元素从一个“移动”到另一个,方法是在一个部分的更改中隐藏它们并在另一部分中取消隐藏它们。对于一个特定的“抽象”部分,它有一个类.abstract
和几个元素都具有类oneseven
,我如何根据隐藏的数量来更改这些部分的宽度属性?
这是我的代码:
// Abstract
//hide initially
$('fieldset.abstract label').hide();
//individual Abstract elements Toggle Buttons
//Currently on, turning Off
$('.block > .abstract > .superseven > section > .oneseven > input').on('change', function () {
var hidden = 0;
var width = Number((1/(7-hidden))*100);
if (this.checked) {
} else {
var hidden = ($('.block > .abstract > .superseven > section > :hidden').length + 1);
var width = Number((1/(7-hidden))*100);
console.log(hidden);
console.log('"' + Number(width) + '%"');
/*issue here*/ $('.oneseven').css("width", '"' + Number(width) + '%"');
var index = $(this).closest('section').prevAll('section').length;
$('.block > .abstract > .superseven > section').eq(index).hide("slow");
$('fieldset.abstract > label').eq(index+1).show("slow");
$('fieldset.abstract > input').eq(index+1).prop('checked' , true);
}
});
//Currently off, turning On
$('fieldset.abstract > input').on('change', function () {
var hidden = 0;
var width = Number((1/(7-hidden))*100);
if (this.checked) {
} else {
var hidden = ($('.block > .abstract > .superseven > section > :hidden').length - 1);
var width = Number((1/(7-hidden))*100);
console.log(hidden);
console.log('"' + Number(width) + '%"');
/*and here*/ $('.oneseven').css("width", '"' + Number(width) + '%"');
var index = $(this).prevAll('input').length;
$('.block > .abstract > .superseven > section').eq(index-1).show("slow");
$('.block > .abstract > .superseven > section > .oneseven > input').eq(index-1).prop('checked' , true);
$('fieldset.abstract > label').eq(index).hide("slow");
}
});
我可以在控制台中通过键入$('.oneseven').css("width", "33.33%");
或将数值更改为25%
or20%
等...m 来完成此操作,但在 JS 部分中获取它是行不通的。
我试过了:
- 使用 parseInt() 将其类型转换为 int
- 将其更改为
Number
使用 JS(当前代码) - 在控制台中实际以数字格式输入宽度的所有内容,它可以工作
我认为它位于 CSS 属性 Jquery 选择器的第二个参数中。我如何解决它? 笔记
我有 varshidden
和width
两次,因为我不确定它们是否需要是全局的才能解决这个问题。我试图让它工作,然后我可以排除故障并查看需要什么范围。