Блог

Главная - Вопросы по программированию - Простой подсчет голосов в jquery

Простой подсчет голосов в jquery

#jquery #ruby

#jquery #ruby

Вопрос:

Я разрабатываю приложение Rails, и мне нужно автоматически увеличивать очень простую строку в списке голосования на основе числа.

Мой код — я на самом деле не хочу, чтобы он увеличивался при нажатии, но я просто предоставляю это в качестве ссылки:

 jQuery:   
$j(".starStats div").click(function() {
 $j(this).parent().animate({
     width: ' =100px'
        }, 500);
            $j(this).prev().html(parseInt($j(this).prev().html())   1);
                return false;
});

HTML:

 <% (1..5).to_a.reverse.each do |n| %>
<tr class="starStats">
    <td><strong><%= n %> star</strong><span><%= vote.rate_summary ? vote.rate_summary[n].to_i : 0 %></span> <div>amp;nbsp;</div></td>
<td>(<%= vote.rate_summary ? vote.rate_summary[n].to_i : 0 %>)</td>
</tr>
<% end %>

Стиль CSS:

 .starStats div {  background: #fbbf55; float: right; margin-right: 5px;width: 90px;  }
.starStats span { display: none; }

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

5 звезд: xxxxxxxxxx (296)
4 звезды: xxx (28)
3 звезды: x (15)
2 звезды: x (16)
1 звезда: xxxxx (111)

Мне просто нужна помощь с jQuery для реализации правильной длины строки в зависимости от числа голосов.

Комментарии:

1. Может быть, было бы лучше иметь 5 разных изображений в качестве длины полосы. PNG поддерживает прозрачность и совместим с несколькими браузерами. Это более простой путь.

2. хорошо, спасибо. как мне загружать правильную длину строки при каждой загрузке страницы?

3. В вашем примере, если у вас 296 голосов по 5 звезд, какой ширины вы хотите, чтобы ваш div?

4. это действительно хороший вопрос. Ширина не должна быть больше 90 пикселей … не уверен, как заставить это работать. Если ширина не определяется с шагом? Например, 1-50 может быть 10 пикселей, 51-100 — 20 пикселей и т. Д.?

5. Вы должны быть в состоянии сделать это без изображений. Я не знаю Ruby on Rails, но я попробовал свои силы в этом, ответив, что это чистый HTML, а затем также попытался предоставить эквивалент Ruby.

Ответ №1:

Будет ли что-то вроде этого работать:

http://jsfiddle.net/khalifah/HGzqB/

Я попробовал код ruby, поскольку я не знаю Ruby.

JavaScript:

 jQuery:
$j( ".starStats" ).each(function()
{
    var totalVotes = parseInt( $j(".total-votes").text() ),
        votes = parseInt( $j(this).find(".votes .number").text() );
    $j( this ).find( ".percent" ).animate({
        width: ' ='   ( votes / totalVotes) * 100
    }, 500);
});

HTML:

 <% (1..5).to_a.reverse.each do |n| %>
    <tr class="starStats">
        <td><strong><%= n %> star</strong></td>
        <td class="bar"><div class="percent"></div></td>
        <td class="votes">(<span class="number"><%= vote.rate_summary ? vote.rate_summary[n].to_i : 0 %></span>)</td>
    </tr>
<% end %>

Ответ №2:

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

PNG поддерживает прозрачность и совместим с несколькими браузерами. Это более простой путь по сравнению с CSS.

Если вы используете jQuery, вы можете изменить src атрибут <img> тега, используя что-то вроде:

 <!-- You're loading a brand new page. No Reviews as of yet. -->
<img class="fivestar" src="path/to/empty.jpg" alt="no reviews yet" />


<!-- Load the appropriate CSS class to whatever object has a Five Star review -->
$(".fivestar").attr("src", "path/to/fivestarbar.png");