添加评级星级javascript错误

时间:2017-06-10 10:17:26

标签: javascript

我正在尝试实施评级系统。

我尝试了什么:

  

当用户点击任何一个星星时,我会尝试在它之前为星星添加一个类并点击星号。

但它为td

中的所有星星增加了等级
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
            <th>&nbsp;</th>
            <th>Rating </th>

        </tr>
        </thead>
        <tbody>

        <tr>
            <td class="hd">usertext1</td>
            <td>&nbsp;</td>

            <td>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>

            </td>
        </tr>

        <tr>
            <td class="hd">usertext</td>
            <td>&nbsp;</td>

            <td>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>

            </td>
        </tr>

        <tr>
            <td class="hd">feedback text</td>
            <td>&nbsp;</td>

            <td>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>
                <i class="fa fa-star rating" aria-hidden="true"></i>

            </td>
        </tr>

        </tbody>
    </table>


    <style>
    .ratingstar{
      color:#FFD700
    }
    </style>
    <script type="text/javascript">
    $('.rating').on('click', function(){
       var sel = $(this);
       var td = sel.parents('td').find('.rating');
       td.each(function(item){
           if($(this)==sel){
             console.log(item);//I tried break here but It throws error

           }
           $(this).addClass('ratingstar');
       })
    });
    </script>

3 个答案:

答案 0 :(得分:2)

链接实际上非常简单:

`#include <SoftwareSerial.h>
const byte interruptPin = 0;//In arduino MEGA RX 19. TX 18
String msg = "";//Incomming message
#define Line_RX 3 //UART RX
#define Line_TX 2 //UART TX

SoftwareSerial mySerial (Line_TX, Line_RX); //initialize software serial

void setup() {
  // put your setup code here, to run once:
  Serial.begin(19200);
  mySerial.begin(19200);
  attachInterrupt(digitalPinToInterrupt(interruptPin), serial_read, HIGH);
}//end setup

void loop() {
  // put your main code here, to run repeatedly:
}//end loop

void serial_read(){

  char _bite;
  sei();//Disable hardware interrupts for a moment
  while(Serial.available()>0){
    delay(1);//Do not delete this delay
    if(Serial.available()>0){
      _bite = (char)Serial.read();
      msg += _bite;
      if(_bite == '\n'){
       mySerial.print(msg);//Do what you print your message
        msg = "";//Clean message for new one
        break;
      }//end if
    }//end if
  }//end while
  cli();//re-enabling hardware interrupts
}//en

https://jsfiddle.net/9364fusb/2

答案 1 :(得分:1)

这适用于现代浏览器:

$('.rating').on('click', function(){
    $(this).addClass('ratingstar');

    var prev = this.previousElementSibling;

    while (prev) {
        $(prev).addClass('ratingstar');
        prev = prev.previousElementSibling;
    }
});

答案 2 :(得分:1)

为了解释你的实际问题,jQuery返回一个类似数组的对象。 'photo' => $photo将始终以$(this) == sel为假的相同方式评估false,因为每个数组都有唯一的引用。为了测试等效性,API包括$.is函数。例如(坚持原始代码):

[] == []

» Fiddle