Форум

engenes · #1 (**permalink**) 22.02.2016, 01:12

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

Код:

 var width = document.documentElement.clientWidth,
  height = width / 3,
  bg = $('.views-field-nothing').find('.views').html();
bg = "url('" +bg+ "')";
//$(".views-field-nothing").attr("<img src=", bg);

$(".views-field-nothing").css('background', bg);

$(".views-field-nothing").css('height', height);
$(".views-field-nothing").css('width', width);
.views-field-nothing {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="views-field-nothing">
  <div class="views">http://goodimg.ru/img/tsvetochek-risunok3.jpg</div>
</div>
<div class="views-field-nothing">
  <div class="views">http://agu-shop.ru/images/pink_flower_512x512.png</div>
</div>
<div class="views-field-nothing">
  <div class="views">http://www.raskraska.ru/counting/flower-bw.gif</div>
</div>

рони · #2 (**permalink**) 22.02.2016, 01:50

engenes,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .views-field-nothing {
  border: 1px solid red;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
   $(function(){
  var width = $("html").width();
  height = width / 3;
$(".views-field-nothing").each(function(indx, el){
  var  bg = el.textContent;
    bg = "url(" +bg+ ")";
    $(el).css({'backgroundImage': bg, 'height' : height, 'width': width})

      });

   })
  </script>
</head>

<body>



<div class="views-field-nothing">
  <div class="views">http://goodimg.ru/img/tsvetochek-risunok3.jpg</div>
</div>
<div class="views-field-nothing">
  <div class="views">http://agu-shop.ru/images/pink_flower_512x512.png</div>
</div>
<div class="views-field-nothing">
  <div class="views">http://www.raskraska.ru/counting/flower-bw.gif</div>
</div>
</body>

</html>

engenes · #3 (**permalink**) 22.02.2016, 02:19

Сообщение от рони

engenes,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .views-field-nothing {
  border: 1px solid red;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <script>
   $(function(){
  var width = $("html").width();
  height = width / 3;
$(".views-field-nothing").each(function(indx, el){
  var  bg = el.textContent;
    bg = "url(" +bg+ ")";
    $(el).css({'backgroundImage': bg, 'height' : height, 'width': width})

      });

   })
  </script>
</head>

<body>



<div class="views-field-nothing">
  <div class="views">http://goodimg.ru/img/tsvetochek-risunok3.jpg</div>
</div>
<div class="views-field-nothing">
  <div class="views">http://agu-shop.ru/images/pink_flower_512x512.png</div>
</div>
<div class="views-field-nothing">
  <div class="views">http://www.raskraska.ru/counting/flower-bw.gif</div>
</div>
</body>

</html>

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

this

вписать что то вроде "возьми текст из дочернего блока "background"и сделай его своим фоном". Но как и куда это вписать не знаю.

dismantled · #4 (**permalink**) 22.02.2016, 06:07

Цитата:

Я предполагаю, что где то нужно this

Ответил вам с "this", в рамках вашего скрипта, в дубликате вашего поста.

Форум

Справочник

Discord чат

Курсы javascript