как найти елементы по классу в обьекте

327

18 сентября 2017, 05:32

как можно найти елементы по классу используя обьекты, проблема с этим кодом что он не находим елементы которые мы задаем в var rect = new Rectangle("elem", 100, 100, "red"); - elem html:

<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<button class="action">action</button>

css:

.elem {
    width: 100px;
    height: 100px;
    background: yellow;
    margin-bottom: 10px;
}
.elem.active {
    background: red;
}

js:

function ready() {
    function Rectangle(elem, w, h, c) {
        this.elem = elem;
        this.width = w;
        this.height = h;
        this.color = c;
    }
    Rectangle.prototype.elemClass = function() {
        var elements = document.querySelectorAll(this.elem);
        for (let i = 0; elements.length > i; i++) {
            return elements[i];
        }
    }
    var rect = new Rectangle("elem", 100, 100, "red");
    document.querySelector(".action").onclick = function() {        
        rect.elemClass().style.background = rect.color;
    };
}
document.addEventListener("DOMContentLoaded", ready);

Answer 1

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

Может вот это поможет.

function ready() {
function Rectangle(elem, w, h, c) {
    this.elem = elem;
    this.width = w;
    this.height = h;
    this.color = c;
}
Rectangle.prototype.elemClass = function() {
    var elements = document.querySelectorAll(this.elem);
    return elements;
}
var rect = new Rectangle("elem", 100, 100, "red");
document.querySelector(".action").onclick = function() {
     var collection = rect.elemClass();
     for(let i; i < collection.length; i++) {
           collection[i].style.backgroundColor = rect.color;
     }
};
}
document.addEventListener("DOMContentLoaded", ready);

Answer 2

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

Вот, по клику все имеют background = red :

function ready() { 
  function Rectangle(elem, w, h, c) { 
    this.elem = elem; 
    this.width = w; 
    this.height = h; 
    this.color = c; 
  } 
 
  var rect = new Rectangle(".elem", 100, 100, "red"); 
 
  document.querySelector(".action").onclick = function() { 
    document.querySelectorAll(rect.elem).forEach(function(el) { 
      el.style.background = rect.color; 
    }); 
  }; 
} 
 
document.addEventListener("DOMContentLoaded", ready);

.elem { 
  width: 100px; 
  height: 100px; 
  background: yellow; 
  margin-bottom: 10px; 
  display: inline-block; 
} 
 
.elem.active { 
  background: red; 
}

<div class="elem"></div> 
<div class="elem"></div> 
<div class="elem"></div> 
<div class="elem"></div> 
<div class="elem"></div> 
<br /> 
<button class="action">action</button>