2

この作業要素 sans-js から始めます: http://jsfiddle.net/37z1z7g1/

<star-rating></star-rating>
<script type="riot/tag">
  <star-rating>
    <div class="star-rating">
      <input class="rb0" id="Ans_1" name="numericRating" type="radio" value="0" checked="checked" />
      <input class="rb1" id="Ans_2" name="numericRating" type="radio" value="1" />
      <input class="rb2" id="Ans_3" name="numericRating" type="radio" value="2" />
      <input class="rb3" id="Ans_4" name="numericRating" type="radio" value="3" />
      <input class="rb4" id="Ans_5" name="numericRating" type="radio" value="4" />
      <input class="rb5" id="Ans_6" name="numericRating" type="radio" value="5" />
      <input class="rb6" id="Ans_7" name="numericRating" type="radio" value="6" />
      <input class="rb7" id="Ans_8" name="numericRating" type="radio" value="7" />
      <input class="rb8" id="Ans_9" name="numericRating" type="radio" value="8" />
      <input class="rb9" id="Ans_10" name="numericRating" type="radio" value="9" />
      <input class="rb10" id="Ans_11" name="numericRating" type="radio" value="10" />
      <label for="Ans_1" class="star rb0l"></label>
      <label for="Ans_2" class="star rb1l"></label>
      <label for="Ans_3" class="star rb2l"></label>
      <label for="Ans_4" class="star rb3l"></label>
      <label for="Ans_5" class="star rb4l"></label>
      <label for="Ans_6" class="star rb5l"></label>
      <label for="Ans_7" class="star rb6l"></label>
      <label for="Ans_8" class="star rb7l"></label>
      <label for="Ans_9" class="star rb8l"></label>
      <label for="Ans_10" class="star rb9l"></label>
      <label for="Ans_11" class="star rb10l last"></label>
      <div class="rating"></div>
      <div class="rating-bg"></div>
    </div>
  </star-rating>
</script>

星の 1 つをクリックすると、選択された星の数の「値」が保持されることに注意してください (星 4 をクリックすると、マウス フォーカスが失われた後も最初の 4 つの星が選択されたままになります)。

これは、スターがクリックされたときに実行される js ロジックを追加すると、最終的に次のようになります (JSFiddle の目的で、親関数への呼び出しを console.log に置き換えました): http://jsfiddle.net/0u5oLyp5 /

    function update(e) {
      this.score = parseInt(e.target.value)/2;
      if (this.score) {
        //parent.UpdateScore(this.score);
          console.log(this.score);
      }
        return true;
    }

[一緒に

onclick="{ update }"

各ラベル要素に追加]

ここには2つの問題があります：

1) https://muut.com/riotjsのガイドのすべての例とは対照的に、「update(e)」宣言の前に function という単語を置いたことに注意してください。それから私は得る

Uncaught TypeError: Cannot read property ‘target’ of undefined

関数を宣言するだけでなく、「e」がまだ定義されていないときに、ページの読み込み時に関数を実行しているように見えるためです。これは奇妙だと思いましたが、どこが間違っているのかわかりません。

2) 更新関数の最後に「true を返す」(デフォルト イベントを再度有効にする) がありますが、星をクリックしても、マウス フォーカスを失ったときに青色で強調表示された選択が保持されなくなりました。各ラベル要素から「onclick='{ update }'」を削除するとすぐに、選択が再び機能するようになるため、デフォルトのイベント ハンドラーを正常にトリガーできないという問題があるように見えます。

私がどこで間違っているのかについて、誰かがいくつかの指針を提供できますか?

4

1 に答える 1

2

問題は、関数に「update」という名前を付けたことにあるようです。これは、すべてのライアット要素に固有の内部更新関数の名前でもあります。

update は通常、マウント プロセス中に実行されるため、クエリのポイント 1 でエラーが発生します。これは、マウント中に実行されたときにデフォルトの更新関数が上書きされたため、イベントが渡されないためです。したがって、未定義の「ターゲット」はありません。これは、関数名を「update()」から「StarsChanged」に変更すると、宣言の前に「function()」が必要なくなったことを意味します。

これにより、選択が適切に残っていないという問題（クエリ2）も修正されました。私に行きます。

于 2015-08-03T15:50:12.487 に答える