addClass не работает

Question

addClass не работает

0

Вот простая функция "addClass", которую я пытаюсь, но она не работает. Должна быть простая вещь, сидящая где-то в коде))). Текст должен изменить цвет на основе выбора пользователя в radioGroup1 здесь http://jsfiddle.net/PatrickObrian/gdb5t/

HTML

<div class="test">Information that I want to be coloured</div>
<div>
   <label><input type="radio" id="A" name="RadioGroup1" value="Y">Yes</label>
    <br>
   <label><input type="radio" id="B" name="RadioGroup1" value="N">No</label>
</div>

JS

<script>
 $('input[type=radio][name=RadioGroup1]').change(function(){
 if (this.value == 'Y') {
        $('.test').addClass("classGreen");
}
else if (this.value == 'N') {
        $('.test').addClass("classRed");
}
    }


</script>

CSS

.classGreen {color: green} 
.test {font-size:24px}
.classRed {color: red}

Заранее спасибо!

AlexShevyakov 23 фев. 2014, в 09:14

Источник

Теги:

javascript

jquery

addclass

2 ответа

5

Вам нужно удалить предыдущий связанный класс, а затем добавить новый класс.

jQuery(function () {
    $('input[type=radio][name=RadioGroup1]').change(function () {
        if (this.value == 'Y') {
            $('.test').removeClass('classRed').addClass("classGreen");
        } else if (this.value == 'N') {
            $('.test').removeClass('classGreen').addClass("classRed");
        }
    })
})

Демо: скрипка

Также в скрипке было много других проблем

jQuery не был включен
часть стиля была неправильной
были синтаксические ошибки

Более короткий путь - toggleClass()

jQuery(function () {
    $('input[type=radio][name=RadioGroup1]').change(function () {
        $('.test').toggleClass("classGreen", this.value == 'Y');
        $('.test').toggleClass("classRed", this.value != 'Y');
    })
})

Демо: скрипка

Arun P Johny 23 фев. 2014, в 05:49

0

Ой ну спасибо!!!! Нужно ли включать JQuery для функциональности addClass?
AlexShevyakov 23 фев. 2014, в 08:04
1

@ Александр $ означает jQuery . Если вы используете его, он должен быть включен.
John Dvorak 23 фев. 2014, в 08:05
0

Аааа, понятно, спасибо. Только что начал Javascript.
AlexShevyakov 23 фев. 2014, в 08:11
0

Достаточно ли следующей строки в моем html, чтобы включить jQuery? <script src = " code.jquery.com/jquery-1.10.2.min.js" ></ script >
AlexShevyakov 23 фев. 2014, в 08:11
0

да, но добавьте http: // в начало src.
Hossein Margani 23 фев. 2014, в 08:13
0

Да, понял. Проблема в том, что это не работает в Dreamweaver. Я скопировал код именно из JSFiddle во вновь созданный файл, сделал ссылку на jQuery - нет. мертвый.((((
AlexShevyakov 23 фев. 2014, в 08:21
0

@ Александр, вам, возможно, придется обернуть ваш код в готовый обработчик dom
Arun P Johny 23 фев. 2014, в 08:32
0

@Alexander также проверьте консоль браузера, чтобы увидеть, есть ли какие-либо ошибки
Arun P Johny 23 фев. 2014, в 08:33
0

Я даже включил сам файл jQuery в <head> файла - все еще мертвый ((((
AlexShevyakov 23 фев. 2014, в 08:34
0

Можете ли вы поделиться HTML полного файла
Arun P Johny 23 фев. 2014, в 08:34
0

Нет - я проверил это с помощью IE и Chrome, оба не дают ошибок. Плюс это не первый код JS, который я использую.
AlexShevyakov 23 фев. 2014, в 08:36
0

ссылка [ссылка] jsfiddle.net/PatrickObrian/y3b8y
AlexShevyakov 23 фев. 2014, в 08:38
0

Здесь весь файл обернут в раздел HTML для согласованности, поскольку он остается в DW.
AlexShevyakov 23 фев. 2014, в 08:38
0

вам нужно обернуть код в готовый DOM обработчик
Arun P Johny 23 фев. 2014, в 08:38
0

давайте продолжим это обсуждение в чате
Arun P Johny 23 фев. 2014, в 08:39
1

@Alexander: learn.jquery.com/about-jquery/how-jquery-works расскажет вам все, что вам нужно знать, чтобы начать работу с jQuery. Основная цель учебных пособий - направлять тех, кто незнаком с языком или библиотекой, таких как вы.
Felix Kling 23 фев. 2014, в 08:39
0

@Felix - в процессе обучения!)) Спасибо. Вот почему я задаю вопросы)))))
AlexShevyakov 23 фев. 2014, в 08:40
1

@ Александр: И многие из этих вопросов будут автоматически даны ответы при чтении учебников и руководств. Не поймите меня, хорошо задавать вопросы, но Stack Overflow - не то место, где нужно изучать основы языка или библиотеки.
Felix Kling 23 фев. 2014, в 08:41
0

@ Александр, использующий [обработчик готовности к dom] (learn.jquery.com/using-jquery-core/document-ready/) - jsfiddle.net/arunpjohny/y3b8y/1
Arun P Johny 23 фев. 2014, в 08:42

Показать ещё 17 комментариев

Ещё вопросы

Ой ну спасибо!!!! Нужно ли включать JQuery для функциональности addClass?
@ Александр $ означает jQuery . Если вы используете его, он должен быть включен.
Аааа, понятно, спасибо. Только что начал Javascript.
Достаточно ли следующей строки в моем html, чтобы включить jQuery? <script src = " code.jquery.com/jquery-1.10.2.min.js" ></ script >
Да, понял. Проблема в том, что это не работает в Dreamweaver. Я скопировал код именно из JSFiddle во вновь созданный файл, сделал ссылку на jQuery - нет. мертвый.((((
@ Александр, вам, возможно, придется обернуть ваш код в готовый обработчик dom
@Alexander также проверьте консоль браузера, чтобы увидеть, есть ли какие-либо ошибки
Я даже включил сам файл jQuery в <head> файла - все еще мертвый ((((
Можете ли вы поделиться HTML полного файла
Нет - я проверил это с помощью IE и Chrome, оба не дают ошибок. Плюс это не первый код JS, который я использую.
ссылка [ссылка] jsfiddle.net/PatrickObrian/y3b8y
Здесь весь файл обернут в раздел HTML для согласованности, поскольку он остается в DW.
вам нужно обернуть код в готовый DOM обработчик
давайте продолжим это обсуждение в чате
@Alexander: learn.jquery.com/about-jquery/how-jquery-works расскажет вам все, что вам нужно знать, чтобы начать работу с jQuery. Основная цель учебных пособий - направлять тех, кто незнаком с языком или библиотекой, таких как вы.
@Felix - в процессе обучения!)) Спасибо. Вот почему я задаю вопросы)))))
@ Александр: И многие из этих вопросов будут автоматически даны ответы при чтении учебников и руководств. Не поймите меня, хорошо задавать вопросы, но Stack Overflow - не то место, где нужно изучать основы языка или библиотеки.
@ Александр, использующий [обработчик готовности к dom] (learn.jquery.com/using-jquery-core/document-ready/) - jsfiddle.net/arunpjohny/y3b8y/1

Hossein Margani · Accepted Answer · 2014-02-23T06-19-00.000Z

Вы должны удалить другое имя класса цвета, а также проверить событие click:

$('input[type=radio][name=RadioGroup1]').click(function(){
    if (this.value == 'Y') {
       $('.test').removeClass("classRed").addClass("classGreen");
    }
    else if (this.value == 'N') {
       $('.test').removeClass("classGreen").addClass("classRed");
    }
});

а также я не знаю, но это сработало для CSS:

<style type="text/css">
.test { font-size:24px }
.classRed { color: red }
.classGreen { color: green } 
</style>

:)