Подтвердить что ты не робот

ClassName меняет только каждый класс

Я выполняю небольшой текст с JavaScript с getElementsByClassName(), и я получаю некоторые нежелательные результаты. Я хотел бы, чтобы script изменил каждый класс CSS на новый класс. Проблема в том, что каждый другой класс меняется только...

Я хотел бы использовать pure js, как эта проблема, как и для практических целей.

Первое, что пришло в голову, это белые пробелы, хотя при удалении это не делало никаких различий.

Может ли кто-нибудь указать, что я делаю неправильно?

<html>
    <head>
       <link rel="stylesheet" type="text/css" href="default.css">
    </head>
    <body>
        <div class="block-default">BLOCK1</div>
        <div class="block-default">BLOCK2</div>
        <div class="block-default">BLOCK3</div>
        <div class="block-default">BLOCK4</div>
        <div class="block-default">BLOCK5</div>
        <div class="block-default">BLOCK6</div>
        <div class="block-default">BLOCK7</div>
        <div class="block-default">BLOCK8</div>
        <script>

    var blockSet = document.getElementsByClassName("block-default");
    var blockSetLength = blockSet.length;

    blockSet[0].className = "block-selected";
    blockSet[1].className = "block-selected";
    blockSet[2].className = "block-selected";
    blockSet[3].className = "block-selected";
    blockSet[4].className = "block-selected";
    blockSet[5].className = "block-selected";
    blockSet[6].className = "block-selected";
    blockSet[7].className = "block-selected";   

        </script>
    </body>
</html>

CSS-классы:

.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }
4b9b3361

ОТВЕТЫ

Ответ 1

Поскольку вы меняете .className blockSet, который является HTMLCollection. Коллекция, имеющая элементы с одним и тем же классом (block-default), изменится, когда элементы будут испытывать некоторые обновления.

Другими словами, когда вы меняете .className элемента, коллекция будет исключать этот элемент. Это означает, что размер HTMLCollection будет уменьшаться. Кроме того, размер увеличится, если элемент с этим классом добавлен в DOM.

Чтобы решить эту проблему, вы всегда можете изменить только первый элемент .className.

for(var i = 0; i<blockSetLength; i++)
{
    blockSet[0].className = "block-selected";
}

Примечания: Интеграция с изменением элемента класса по элементу, вы можете перебирать элементы с помощью for и изменять .className.

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

console.log(blockSet);

for(var i = 0; i<blockSetLength; i++)
{
    blockSet[0].className = "block-selected";
}
.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }
<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

Ответ 2

Вместо использования getElementsByClassName(), который возвращает живой HTMLCollection, который изменится как изменение className,
вы можете использовать querySelectorAll(), который возвращает неактивный NodeList это не изменится.

querySelectorAll() имеет лучшую поддержку IE, чем getElementsByClassName() (IE8 + против IE9 +).
Он также намного более гибкий, поскольку он поддерживает селектор CSS (CSS2 для IE8 + и CSS3 для IE9 +).

Однако querySelectorAll() медленнее, чем getElementsByClassName().
Имейте это в виду, если вы обрабатываете тысячи элементов DOM.

Отрывок

var blockSet = document.querySelectorAll(".block-default");
var blockSetLength = blockSet.length;

blockSet[0].className = "block-selected";
blockSet[1].className = "block-selected";
blockSet[2].className = "block-selected";
blockSet[3].className = "block-selected";
blockSet[4].className = "block-selected";
blockSet[5].className = "block-selected";
blockSet[6].className = "block-selected";
blockSet[7].className = "block-selected";
.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}
<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

Ответ 3

Назначая значение .className, вы переписываете каждый класс этого элемента. То, что вы можете посмотреть, это атрибут .classList.

Удалить класс:

blockSet[0].classList.remove('block-default');

Добавить новый класс:

blockSet[0].classList.add('block-selected');

Хороший момент для начала, когда вы пытаетесь сделать что-то, jQuery, как правило, для вас, http://youmightnotneedjquery.com/

Ответ 4

У вас уже есть хорошие решения.

Я думаю, что лучший из них - тот, который был у Рика Хичкока.

Но решение, которое я часто использую, чтобы быть безопасным при выполнении подобных действий, заключается в перемещении коллекции назад

var nmax = blockSet.length - 1;
for (var n=nmax; n>=0; n--) {
    blockSet[n].className = 'block-selected';
}

Это изолирует вас от изменений в коллекции

Ответ 5

document.getElementsByClassName возвращает объект HTMLCollection, который в прямом эфире

HTMLCollection в HTML DOM в прямом эфире; он автоматически обновляется при изменении базового документа.

Поэтому, когда вы вызываете

blockSet[0].className = "block-selected";

Вы изменили базовый документ, и этот элемент больше не находится в коллекции (теперь BlockSet [0] - второй элемент в вашем исходном выборе).

Ответ 6

Эта ошибка возникает, потому что blockSet является HTMLCollection, который является "живым". HTMLCollections обновить как элементы обновления страницы.

Каждый раз, когда вы меняете className, вы делаете blockSet короче один за другим.

Чтобы решить эту проблему, просто сделайте это:

for (var i = 0; i < 8; i += 1) {
    blockSet[ 0 ].className = "block-selected";
}

Таким образом, вы один раз удаляете свой HTMLCollection.

Итерация 1: [ div1, div2, div3, div4, div5, div6, div7, div8 ]

Итерация 2: [ div2, div3, div4, div5, div6, div7, div8 ]

Итерация 3: [ div3, div4, div5, div6, div7, div8 ]

Итерация 4: [ div4, div5, div6, div7, div8 ]

Итерация 5: [ div5, div6, div7, div8 ]

Итерация 6: [ div6, div7, div8 ]

Итерация 7: [ div7, div8 ]

Итерация 8: [ div8 ]

Надеюсь, что это поможет!

Ответ 7

Самый простой способ сделать это - использовать приведенный ниже код:

while(blockSetLength--){ 
    //this will change the class of n-1 dom object 
    blockSet[blockSetLength].className='block-selected';
}

Ответ 8

Это сработало для меня

var blockSet = document.getElementsByClassName("block-default");
    var blockSetLength = blockSet.length;
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";
 blockSet[0].className = "block-selected";

   
.block-default {
    width: 100px;
    height:50px;
    background-color: green;
    border: 1px solid red;
    padding:10px;
}

.block-selected {
    width: 100px;
    height:50px;
    background-color: blue;
    border: 1px solid white;
    padding:10px;
 }
<div class ="block-default">BLOCK1</div>
<div class ="block-default">BLOCK2</div>
<div class ="block-default">BLOCK3</div>
<div class ="block-default">BLOCK4</div>
<div class ="block-default">BLOCK5</div>
<div class ="block-default">BLOCK6</div>
<div class ="block-default">BLOCK7</div>
<div class ="block-default">BLOCK8</div>

Ответ 9

Эта ошибка связана с тем, что вам нужно сделать 

blockSet[0].className = 'block-selected'

Вы не должны писать blockSet [1], blockSet [2]...

Вы можете сделать:

for (var s=0;s<blockSetLength;s++) {
  blockSet[0].className = 'block-selected';
}

Ответ 10

Ваша ошибка возникает из-за того, что .className возвращает живой HTMLCollection. Поэтому, когда вы делаете что-то вроде этого:

blockSet[0].className = "block-selected";

Ваша коллекция blockSet[0] станет blockSet[1]. Поэтому, когда вы выполняете строку:

blockSet[1].className = "block-selected";

Вы не меняете blockSet[1], который вы думаете, но вы меняете стартовый blockSet[2].

Итак, вы можете сделать это:

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;
for(var i=0;i<blockSetLength;i++){
    blockSet[0].classList.add('block-selected'); //add the new class first
    blockSet[0].classList.remove('block-default'); //delete the old one
}

http://jsfiddle.net/94dqffa7/

Я думаю, что это лучший способ сделать это. Поскольку classList.add() и classList.remove() помогут вам изменить свой класс, не выбирая лишний класс, который у вас есть на вашем div (если у вас есть). Кроме того, вам нужно добавить новый, прежде чем удалять старый, или у вас будет такая же проблема, как и раньше.

Ответ 11

function change() {
  var blockSet = document.getElementsByClassName("block-default");
  var blockSetLength = blockSet.length;

  for (var i = 0; i < blockSetLength; i++) {

    blockSet[0].className = "block-selected";
  }
}
.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}
<button onclick="change()">change</button>

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

Ответ 12

Во-первых, приведенный ниже код должен сделать трюк самым простым способом.

var blockSet = document.getElementsByClassName("block-default").className = "block-selected";

Далее, что не так с вашим кодом, или, скорее, что интересно, что происходит:

blockSet[0].className = 'block-selected';

делает первый элемент набора блоков больше не элементом набора блоков. Это оставляет вам 7 оставшихся. Теперь,

blockSet[1].className = 'block-selected';

Выбирает второй из оставшихся. Это будет третий из ваших полных списков. Теперь у вас осталось 6.

blockSet[2].className = 'block-selected';

Это делает третий среди остальных, который будет вашим BLOCK5 в выбранном блоке. И результат в том, что у вас осталось 5.

blockSet[3].className = 'block-selected';

Это снова находит ваш четвертый, который является BLOCK7, когда вы считаете четвертым среди оставшихся. И теперь у вас осталось 4.

blockSet [4] не находят такого элемента и не выполняются. Это то, что происходит с вашим кодом. Довольно интересно.:.)

Вот jsfiddle, предупреждающий о ваших значениях при их запуске: https://jsfiddle.net/xz7h57jv/

Ответ 13

Определение и использование

  • Метод getElementsByClassName() возвращает коллекцию всех элементы в документе с указанным именем класса, как Объект NodeList.

  • Объект NodeList представляет собой набор узлов. Узлы могут   доступ к ним по номерам индексов. Индекс начинается с 0.

Использование этого свойства не рекомендуется из-за производительности (из-за живого DOMCollection, где любые изменения в документ должен быть немедленно отражен на возвращенном объекте) и сложность (удаление элемента из документа приведет к немедленные изменения в коллекции).

И просто добавив только blockSet[0].className = "block-selected";, и нажав на кнопку, он будет разделять каждый div на каждый щелчок, поэтому нам нужно щелкнуть 8 раз, чтобы покрасить все div и посмотреть пример ниже

function myFunction() {
  var blockSet = document.getElementsByClassName('block-default');

  blockSet[0].className = "block-selected";

}
.block-default {
  width: 100px;
  height: 50px;
  background-color: green;
  border: 1px solid red;
  padding: 10px;
}
.block-selected {
  width: 100px;
  height: 50px;
  background-color: blue;
  border: 1px solid white;
  padding: 10px;
}
<button onclick="myFunction()">change</button>

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>

Ответ 14

Здесь вы можете найти рабочий код

<div class="block-default">BLOCK1</div>
<div class="block-default">BLOCK2</div>
<div class="block-default">BLOCK3</div>
<div class="block-default">BLOCK4</div>
<div class="block-default">BLOCK5</div>
<div class="block-default">BLOCK6</div>
<div class="block-default">BLOCK7</div>
<div class="block-default">BLOCK8</div>


var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

for (i = 0; i < blockSetLength; i++) {
    blockSet[0].className = "block-selected";
}

Демо-ссылка http://jsfiddle.net/patelmit69/9koxfaLq/1/

Ответ 15

Используйте это для вашего javascript-кода. это исправит вашу ошибку.

<script>
    var blockSet = document.getElementsByClassName("block-default");
    var blockSetLength = blockSet.length;

    for (var i = blockSet.length - 1; i >= 0; i--) {
        blockSet[i].className = "block-selected";
    };
</script>