PHPでjQuery ratyを使って実現したいことがあります。

Question

jQuery ratyを使って
押した数の星の時の変数を取得して”hoshi1”に入れるまではいったのですが、
ここで、不都合が出てリファレンスなどを見てみたのですがどうにも解決に至らず相談させていただきました。
参考サイト：
https://wbotelhos.com/raty/

【やりたいこと】

☆☆☆★★//星３つをクリックした場合

☆☆☆★★
普通←の表示が出た後に　普通の後に、手入力で文字を入力したい。

ボタンを押してinputのvalueに値をはめることはできたのですが、そのinputのところに追加で記入後に
またマウスをクリックをせずとも、星の上をマウスオーバーするだけで値が入れ替わってしまい。
追加で入れたtextがそれに伴い消えてしまいます。当たり前ですが・・・それを何とか回避できないかと悪戦苦闘しております。

実現したいこと
☆をマウスオーバーの時でも値を取得するのではなく、
☆をクリックしたときのみinput のvalueに値を入れたい。

下記の内容で星の数に合わせてinputのvalueにはめることはできています。

皆様のお力をお借りできれば幸いです。

☆☆☆★★
普通

          <div id="hoshi">
            <input type="text" id="hoshi1" value="" >
          </div>

    <script src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.raty.js"></script>
    <script type="text/javascript">
    $('#hoshi').raty({
      path:  'img/',
      target : '#hoshi1',
      targetText : '----',
      targetKeep : true,
      hints: ['残念', 'もう少し', '普通', '良い', 'とても良い'],
    });
    </script>

環境はjquery 2.0.3
php 5.6
mysql 5.6
になります。よろしくお願いいたします。

Answer 1

実現したいことは、評価を変えたとき、input#hoshi1のvalueをhint(「普通」や「良い」など)だけ入れ替え、それ以外の文字を保持したいということですよね？
jquery.raty.jsを覗いてみたら、まるっと入れ替えちゃってました。

    _setTarget: function(target, score) {
      if (score) {
        score = this.opt.targetFormat.toString().replace('{score}', score);
      }

      if (target.is(':input')) {
        target.val(score);
      } else {
        target.html(score);
      }
    },

jquery.raty.jsを改造すればできそうな感じもしますが、面倒臭そうです。

そこで代替案なのですが、ユーザが自由入力するinputとhintを別にしてはどうでしょうか。
たぶんこっちの方が本来の使い方だと思います。

<div id="hoshi">
    <input type="text" id="hoshi1" value="" >
</div>
<div id="hint"></div>

<script type="text/javascript">
$('#hoshi').raty({
    path:  'img/',
    target : '#hint',
    targetText : '----',
    targetKeep : true,
    hints: ['残念', 'もう少し', '普通', '良い', 'とても良い'],
    click: function(score, evt) {
        //クリック時の処理
    }
});
</script>

Comments

[kurofukuro]

お返事ありがとうございます。
反応が遅くなり申し訳ございません。
コードまで入れていただいたわかりやすい解説ありがとうございます。
今回に限りなのですが、星を押した際の評価部分に簡単な文章をはくようにしたいとおもっております。
上記では’良い’’普通’のところです。
そのうえでその星を数を押したら出てくる文章を少し自身で変更してPOSTで投げるようにという仕様にしたいのですが・・・
せっかくいただいた代替案が使うことができません。
他に打開策等あれば是非いただきたいです。
お返事お待ちしております。

[ooeok]

なにか話が通じてない気がしますが・・・。
「良い」とか「普通」という文字列をユーザが任意に変えたいということですよね？
で、評価を変えたときでも変更した文字列を保持したまま、「良い」とか「普通」だけを入れ替えたいと。
それだったら、私が提案したやり方で実現できます。

jquery.raty.jsはtargetで指定したエレメントをすべて入れ替えてしまうため、ユーザが変更した文字列を保持できないんです。
だからヒント(「良い」や「普通」)とユーザが任意に変更するテキストボックス(input#hoshi1)を別にするわけです。
それは理解できますよね？
もし評価を変更したときinput#hoshi1の文字列も替えたいのなら、

> click: function(score, evt) {
> //クリック時の処理
> }

この部分に、score(評価)に応じてあらかじめ用意した文字列をinput#hoshi1のvalueにセットしてあげる処理を書いてあげればokです。

[kurofukuro]

ご連絡おそくなりました。
無事解決することが出来ました。
ありがとうございます！