как извлечь последние цифры какого-либо класса в html?

215

28 мая 2019, 09:00

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

например ... если задаешь класс width_ некоторому элементу, а затем пишешь какое либо значение, то он трансформируется в соответствии с последними цифрами заданного класса после _ итд

пример: <div class='width_200 height_50'>ширина этого блока 200px и высота-50px</div>

как это возможно? и есть ли какая-либо функция, которая удаляет первые N букв в слове и затем присваивает полученное свойство определенному элементу?

желательно на jquery

Answer 1

Как-то так, например:

$('div').each(function(){ 
  let width = 0; 
  let height = 0; 
  let params = $(this).attr('class').split(' '); //делаем содержимое класса элементами массива 
   
  for(let i = 0; i < params.length; i++) { //проходим по массиву 
    if(params[i].includes('width')) { //проверяем, есть ли там width 
      width = Number(params[i].substr(params[i].lastIndexOf('_')+1)); //получаем значение width 
    } 
    else if(params[i].includes('height')) { //проверяем, есть ли там height 
      height = Number(params[i].substr(params[i].lastIndexOf('_')+1)); //получаем значение height 
    } 
  } 
   
  $(this).css({'width': width, 'height': height}) //устанавливаем стили 
})

div { 
  border: 1px solid black; 
  margin: 15px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class='width_200 height_50'></div> 
<div class='width_100 height_150'></div> 
<div class='width_300 height_100'></div>