Jquery - выбрать и заменить класс CSS

0

У меня есть небольшой фрагмент кода:

<div class="content">
    <form id="frmButtons">
        <div id="datagrid">
            <div id="wrapper">
                <div class="ColVis">
                    <button class="ColVis_Button ColVis_MasterButton ui-button ui-state-default">
                        <span>Change Columns</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

Моя кнопка не имеет идентификатора или имени. Как выбрать и заменить атрибут "class" этой кнопки? Я пытаюсь это сделать, но это не работает.

$("div.Colvis button").toggleClass("newButtonClass");
  • 0
    Эта кнопка запускает запись назад, так как она в форме?
  • 0
    Нет. Это просто показывает или скрывает div
Показать ещё 3 комментария
Теги:

4 ответа

2
Лучший ответ

Если вы хотите полностью изменить класс кнопки:

$("div.ColVis > button").prop('class', 'newButtonClass');

Если вы хотите добавить новый класс, сохранив текущие классы:

$("div.ColVis > button").addClass('newButtonClass');

> Ищет детей первого селектора.

Поделиться
  • 1
    Спасибо ! Мне просто нужно заменить весь класс. Ваше решение отлично работает! :)
2

Я считаю, что ваш код не будет работать только потому, что у вас есть опечатка в имени класса "ColVis" (вместо "Colvis"). Он чувствителен к регистру.

Поделиться
  • 0
    полностью согласен
0

jsfiddle

Описание

Сначала я добавил привязку события, чтобы при нажатии кнопки произошло что-то.

$("div .ColVis button").click(function(e){

Затем нам нужно было переключить class:

$(this).toggleClass("newButtonClass");

Поскольку мы уже находимся в случае элемента, мы хотим, чтобы this ключевое слово буквально означало элемент кнопки.

HTML

<div class="content">
    <form>
        <div id="datagrid">
            <div id="wrapper">
                <div class="ColVis">
                    <button class="ColVis_Button ColVis_MasterButton ui-button ui-state-default">
                        <span>Change Columns</span>
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

JQuery:

$("div .ColVis button").click(function(e){
    $(this).toggleClass("newButtonClass");
    //This line is to show it works in the console
    console.log($(this).attr('class'));
});
Поделиться
0

toggleClass влияет только на класс, в который вы проходите, в вашем случае он добавляет только newButtonClass Если вы хотите отключить все остальные классы, newButtonClass их в качестве аргумента:

$("div.Colvis button").toggleClass("newButtonClass ColVis_Button ColVis_MasterButton ui-button ui-state-default");

Если класс присутствует во время этого вызова, он удаляется, а если нет, то он добавляется.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню