通过JQuery选择器设置CSS类属性:隐藏计数

setting CSS class attribute by JQuery selector :hidden count

本文关键字:隐藏 属性 JQuery 选择器 设置 CSS 通过      更新时间:2023-09-26

所以我有两个部分,一个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%20%等在控制台中完成此操作......m 但是在 JS 部分中获取它不起作用。

我试过:

  • 使用 parseInt() 将其转换为 int 的类型
  • 使用 JS(当前代码)将其更改为Number
  • 在控制台中输入宽度实际上为数字格式的所有内容,并且可以工作

我认为它在 css 属性 Jquery 选择器的第二个参数中的某个地方。 我该如何修复它?笔记

我有 vars hidden和两次width,因为我不确定它们是否需要全局才能解决这个问题。 我正在尝试让它工作,然后我可以排除故障并查看需要什么范围。

是的,@pimvdb是正确的,出于某种原因,不需要嵌套引号,所以最后一行代码是 $('.oneseven').css("width", (width) + "%");

并且不需要Number()型铸造/转换。