Добавить или удалить класс для элементов с диапазоном ввода - PullRequest
Новая
       51

Добавить или удалить класс для элементов с диапазоном ввода

1 голос
/ 13 июля 2020

У меня есть ползунок диапазона ввода. Хочу при увеличении диапазона ввода добавлять и удалять класс на div. Мой toggleClass не работает должным образом. 

function fontRange(e) {
          var element = e.parentElement.id;
          element = ".hello";
          $(element).toggleClass('list' + e.value);
        }
* {
color:#fff;
}
.hello {
background:black;
}
.list6 {
background:redç;
}
.list7 {
background:green;
}
.list8 {
background:orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" value="5" step="1" min="5" max="8" oninput="fontRange(this)" onchange="fontRange(this)">
<div class="hello">
sdfgsdfg
</div>
У меня есть ползунок диапазона ввода. Хочу при увеличении диапазона ввода добавлять и удалять класс на div. Мой toggleClass не работает должным образом.

Ответы [ 2 ]

3 голосов
/ 13 июля 2020

toggleClass - это не та функция, которая вам нужна.

Попробуйте следующее:

  1. Короткий путь 
function fontRange(e) {
    var element = e.parentElement.id;
    element = ".hello";
    $(element).removeClass(); // remove all class, including 'hello'
    $(element).addClass('hello'); // adding class 'hello'
    $(element).addClass('list' + e.value);
}
Долгий путь:

Удаление всех названий классов, начинающихся с 'list' 


function fontRange(e) {
    var element = e.parentElement.id;
    element = ".hello";
    $(element).removeClass (function (index, className) {
       return (className.match(/(^|\s)list\S+/g) || []).join(' ');
    });
    $(element).addClass('list' + e.value);
}
1 голос
/ 13 июля 2020

У вас есть основная проблема с ToggleClass, который добавляет или удаляет одно или несколько имен классов из выбранных элементов, что вам не нужно.

Используйте это, чтобы удалить все классы, кроме hello. $ ("# range"). attr ('class', 'hello');

Еще одна вещь - функция fontRange ().

Вам нужно только значение input, поэтому передайте только значение и удалите эти строки: 

 var element = e.parentElement.id;
 element = ".hello";


function fontRange(value) {
$("#range").attr('class', 'hello').addClass('list' + value);
}
* {
    color:#fff;
}
.hello {
    background:black;
}
.list6 {
    background:red;
}
.list7 {
    background:green;
}
.list8 {
    background:orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" value="5" step="1" min="5" max="8" oninput="fontRange(this)" onchange="fontRange(this.value)">
<div id='range' class="hello">
Range
</div>
...