Как обновить стиль span'а при смене данных на ajax?

277

20 сентября 2017, 14:13

Есть 5 значений, хранящихся в db - ratecount1, ratecount2, ratecount3, ratecount4, ratecount5. На основе этих значений выводится процентное соотношение каждого из значений. Пример кода php с формулой

str_replace(",", ".", round((100/($row['ratecount1']+$row['ratecount2']+$row['ratecount3']+$row['ratecount4']+$row['ratecount5']))*$row['ratecount1'], 2))

результат подсчета записывается в переменную {vote-percent-5}, которая добавляет в span % width

<span class="bar-5" style="width:{vote-percent-5}%"></span>

Теперь главное, при голосовании за "5" идет обновление при помощи ajax переменной ratecount5, выглядит на js так

if ( data.success ) {
        var rating = data.rating;
        rating = rating.replace(/&lt;/g, "<");
        rating = rating.replace(/&gt;/g, ">");
        rating = rating.replace(/&amp;/g, "&");
        $("#ratig-layer-" + id).html(rating);
        $(".reviews-num").html(data.votenum);
        $(".bar-number-1").html(data.ratecount1);
        $(".bar-number-2").html(data.ratecount2);
        $(".bar-number-3").html(data.ratecount3);
        $(".bar-number-4").html(data.ratecount4);
        $(".bar-number-5").html(data.ratecount5);
    }

Вопрос в том, как мне при помощи ajax в функции выше обновить процентное соотношение в блоке

<span class="bar-5" style="width:{vote-percent-5}%"></span>

на основе новых обновившихся данных. Вот что это все представляет в куче

эту самую полоску мне и необходимо обновлять

Answer 1

Думаю, что это не оптимальное решение, но должно работать. Насколько я понял, у Вас в data.ratecount1 приходит кол-во уже поставленных звезд, и на основе их происходит расчет. Лучше было бы получить эти значения из PHP, а в JS просто изменить ширину...

var data = { 
	ratecount1: 1, 
	ratecount2: 1, 
	ratecount3: 2, 
	ratecount4: 1, 
	ratecount5: 2, 
} 
 
var width, 
	arrOfRatecount = [data.ratecount1, data.ratecount2, data.ratecount3, data.ratecount4, data.ratecount5], 
	sumOfRatecounts = data.ratecount1 + data.ratecount2 + data.ratecount3 + data.ratecount4 + data.ratecount5; 
 
for(var i = 0; i < 5; i++){ 
	width = Math.round(100 / sumOfRatecounts * arrOfRatecount[i]); 
	$('.bar-' + ( i + 1 ) ).css({ 
		'width': width + '%' 
	}); 
}

.bar-1, 
.bar-2, 
.bar-3, 
.bar-4, 
.bar-5 { 
  display: inline-block; 
  height: 20px; 
  background-color: red; 
} 
.wrapper{ 
  width: 300px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper" > 
  <div> 
    <span class="bar-1" style="width:0px"></span>   
  </div> 
  <div> 
    <span class="bar-2" style="width:0px"></span>   
  </div> 
  <div> 
    <span class="bar-3" style="width:0px"></span>   
  </div> 
  <div> 
    <span class="bar-4" style="width:0px"></span>   
  </div> 
  <div> 
    <span class="bar-5" style="width:0px"></span>   
  </div>  
</div>