jquery - используя .each () один раз для каждого продукта, чтобы вставить новую цену - PullRequest
Новая
       11

jquery - используя .each () один раз для каждого продукта, чтобы вставить новую цену

0 голосов
/ 25 сентября 2018

Привет, у меня проблемы с запуском .each () один раз для каждого элемента, на который он смотрит.

Итак, на сайте электронной коммерции есть страница со списком продуктов, каждый продукт содержит div # productListings .productListItem и внутри этого div есть некоторые данные, включая цену .itemPrice .

Я пытаюсь заставить ее просматривать все продукты, содержащие div,возьмите цену, разделите ее на 20% и покажите новую цену чуть ниже: 

$( "#productListings .productListItem" ).each(function() {
  var PLPpriceStripped = ($('.itemPrices .pri', this).text()).replace(/[^0-9.]/g, '');
  var PLPdiscount = (PLPpriceStripped/100)*20;
  var PLPnewPrice = PLPpriceStripped-PLPdiscount;

  $('<div class="nowPrice">' + 'Discounted Price*: £' + PLPnewPrice + '</div>').insertAfter('.itemPrice', this);
});

Когда я запускаю ее, она возвращает £ 0 в качестве значения (что означает, что мой код не работает должным образом), нотакже дублирует это один раз для каждого продукта на странице под каждым продуктом на странице.

Я, очевидно, не получил 100-процентное сцепление с .each (), но он также не возвращает правильные цены для каждого продукта..

Любая помощь, пожалуйста?

JSfiddle: https://jsfiddle.net/1bqh2f90/7/

$(document).ready(function(){

  $( "#productListings .productListItem" ).each(function() {
    var PLPpriceStripped = ($('.itemPrices .pri', this).text()).replace(/[^0-9.]/g, '');
    var PLPdiscount = (PLPpriceStripped/100)*20;
    var PLPnewPrice = PLPpriceStripped-PLPdiscount;

    $('<div class="nowPrice">' + 'Discounted Price*: £' + PLPnewPrice + '</div>').insertAfter('.itemPrice', this);
  });

});
#productListings {
  display:block;
  font-size:0;
}

#productListings .productListItem {
  display:inline-block;
  margin:1%;
  width:48%;
}

#productListings .productListItem img {
  display:block;
  width:100%;
}

#productListings .productListItem .prices {
  display:block;
  padding:10px;
}

#productListings .productListItem .was {
  display:inline-block;
  padding:10px;
  text-decoration: line-through;
  font-size:12px;
}

#productListings .productListItem .pri {
  display:inline-block;
  padding:10px;
  font-size:12px;
}

.nowPrice {
  display:block;
  padding:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<section id="productListings">
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="was">Was £20</div> <div class="pri">Now £15</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="pri">Now £20</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="pri">Now £50</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="was">Was £50</div> <div class="pri">Now £30</div>
    </div>
  </div>
</section>

Ответы [ 2 ]

0 голосов
/ 25 сентября 2018

Есть несколько проблем:

  1. В спецификации класса, указанной в аргументе insertAfter, отсутствует "s".Это должно быть .itemPrices вместо .itemPrice

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

    .insertAfter($('.itemPrices', this))

  3. Класс CSS nowPrice недостаточен для отображения дополнительного содержимого, поскольку родительский элемент имеет CSS font-size:0, что похоже на «Как»могу ли я сделать жизнь трудной для себя !? "Во всяком случае, с таким размером шрифта вы не увидите дополнительный контент в вашей скрипке.Самое быстрое решение - указать размер шрифта для класса nowPrice CSS

Вот обновленная скрипта: https://jsfiddle.net/j9nyhzs8/

И фрагмент: 

$(document).ready(function(){

  $( "#productListings .productListItem" ).each(function() {
    var PLPpriceStripped = ($('.itemPrices .pri', this).text()).replace(/[^0-9.]/g, '');
    var PLPdiscount = (PLPpriceStripped/100)*20;
    var PLPnewPrice = PLPpriceStripped-PLPdiscount;

    $('<div class="nowPrice">' + 'Discounted Price*: £' + PLPnewPrice + '</div>').insertAfter($('.itemPrices', this));
  });

});
#productListings {
  display:block;
  font-size:0;
}

#productListings .productListItem {
  display:inline-block;
  margin:1%;
  width:48%;
}

#productListings .productListItem img {
  display:block;
  width:100%;
}

#productListings .productListItem .prices {
  display:block;
  padding:10px;
}

#productListings .productListItem .was {
  display:inline-block;
  padding:10px;
  text-decoration: line-through;
  font-size:12px;
}

#productListings .productListItem .pri {
  display:inline-block;
  padding:10px;
  font-size:12px;
}

.nowPrice {
  display:block;
  padding:10px;
  font-size:12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<section id="productListings">
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="was">Was £20</div> <div class="pri">Now £15</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="pri">Now £20</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="pri">Now £50</div>
    </div>
  </div>
  
  <div class="productListItem">
    <img src="http://demo.geekslabs.com/materialize/v2.2/layout03/images/img4.jpg" />
    <div class="productName">
      
    </div>
    <div class="itemPrices">
      <div class="was">Was £50</div> <div class="pri">Now £30</div>
    </div>
  </div>
</section>
0 голосов
/ 25 сентября 2018

Если ваш селектор запросов работает хорошо, вам следует попробовать .append() вместо .insertAfter(): 

$( "#productListings .productListItem").each(function() {
  // ...

  var nowPrice = $('<div class="nowPrice">' + 'Discounted Price*: £' + PLPnewPrice + '</div>');

  $( this ).append(nowPrice);
});
...