Изменение согласованного правила CSS

Question

Изменение согласованного правила CSS

0

Мне интересно, возможно ли изменить высоту правил с использованием jquery/javascript.

Это мой код:

CSS

.ac-container input:checked ~ article.prorate{
    height: 450px;
}

.prorateTax {
     display: none;
     background: #CEF6CE;
}

JQuery

<script type="text/javascript">
$('.checkTax').change(function () {
    if ($(this).attr("checked")) {
        $('.prorateTax').fadeIn();
        $('.ac-container input:checked ~ article.prorate').css("height", "+=47px");
    } else {
        $('.prorateTax').fadeOut();
        $('.ac-container input:checked ~ article.prorate').css("height", "-=47px");
    }
});
</script>

У меня есть флажок, который вы можете выбрать, который исчезнет в скрытом div, а затем увеличит высоту другого div, чтобы он соответствовал новому разделу. Я надеялся, что он просто изменит высоту css-совпадения, представленную в css. Однако вместо этого он устанавливает element.style текущего div для установки высоты. можно ли просто изменить согласованное правило CSS?

Kizzim 01 окт. 2013, в 18:43

Источник

0

Это должно быть сделано без JS. Вы должны быть в состоянии соответствовать высоте, я бы установил 2 jsfiddles один без соответствия js и один с, чтобы увидеть, какой из них работает лучше всего. Дайте мне знать, когда у вас есть одна причина, потому что это легко.
Cam 01 окт. 2013, в 16:13
0

Пожалуйста, покажите HTML-код.
Olaf Dietsche 01 окт. 2013, в 16:13
0

Вы говорите что-то вроде этого ( Check updated js ).
The Alpha 01 окт. 2013, в 16:22

Показать ещё 1 комментарий

Теги:

javascript

jquery

html

css

css3

3 ответа

1

Есть два проблемы с вашим кодом, AFAICS.

Вы должны использовать $(this).prop("checked") вместо attr()
В ветке else вы должны либо использовать input:not(:checked) селектора input:not(:checked) либо опустить :checked all

$('.checkTax').change(function () {
    if ($(this).prop('checked')) {
        $('.prorateTax').fadeIn();
        $('.ac-container input:checked ~ article.prorate').css("height", "+=47px");
    } else {
        $('.prorateTax').fadeOut();
        $('.ac-container input:not(:checked) ~ article.prorate').css("height", "-=47px");
    }
});

JSFiddle

Olaf Dietsche 01 окт. 2013, в 14:53

1

Или вы можете использовать $(this).is(":checked") , как в этом примере
ShadowScripter 01 окт. 2013, в 16:45

0

Нет, вы не можете перезаписать правило CSS, насколько я знаю.
.css() записывает только в атрибут стиля элемента, который имеет самую высокую специфичность.

Альтернативой было бы добавить второй класс с более высокой специфичностью, но вы все равно будете делать то же самое. Основное преимущество этого подхода заключается в том, что вы удаляете css-материал из javascript, что делает его ненавязчивым.

CSS

.ac-container input:checked ~ article.prorate{
    height: 450px;
}

.ac-container input:checked ~ article.prorate.fadein{
    height: 497px; 
}

.prorateTax {
     display: none;
     background: #CEF6CE;
}

JQuery

$('.checkTax').change(function () {
    if ($(this).is(":checked")) {
        $('.prorateTax').fadeIn();
        $('.ac-container input:checked ~ article.prorate').addClass("fadein");
    } else {
        $('.prorateTax').fadeOut();
        $('.ac-container input:checked ~ article.prorate').removeClass("fadein");
    }
});

ShadowScripter 01 окт. 2013, в 13:32

0

Мне нравится это предложение, однако, мой фрагмент содержит только 1 из немногих div, которые необходимо добавить. В ситуации, когда пользователь может выбрать 3-4 div, высоту нужно будет отрегулировать несколько раз и отслеживать ,
Kizzim 01 окт. 2013, в 17:03

Ещё вопросы

Это должно быть сделано без JS. Вы должны быть в состоянии соответствовать высоте, я бы установил 2 jsfiddles один без соответствия js и один с, чтобы увидеть, какой из них работает лучше всего. Дайте мне знать, когда у вас есть одна причина, потому что это легко.
Вы говорите что-то вроде этого ( Check updated js ).
Или вы можете использовать $(this).is(":checked") , как в этом примере
Мне нравится это предложение, однако, мой фрагмент содержит только 1 из немногих div, которые необходимо добавить. В ситуации, когда пользователь может выбрать 3-4 div, высоту нужно будет отрегулировать несколько раз и отслеживать ,

Alvaro · Accepted Answer · 2013-10-01T15-03-00.000Z

css() работает только над встроенными стилями:

При использовании.css() в качестве сеттера, jQuery изменяет свойство стиля элемента.