星形のRateプラグイン「JRate」のjQueryにphpから値を渡したい

Question

いつもお世話になっております。

現在、星形のレビュー機能をwordpressに実装しようとしています。
（wordpressのレビュープラグインは要件に合うものがありませんでした）
そこで、jQueryプラグイン「JRate」というものを見つけたのでそちらを使って実装しているところなのですが、phpから値を渡せないものかと考えています。

JRateプラグイン公式ページ

流れとしては以下のとおりです。

①星形のレビュー機能からレビューを投稿し選択した星の数をDBに登録する。
②投稿されたレビューをDBから取得。
③DBから取得してきた各レビューの数値をJRateのスクリプトに値を渡し、星形の評価として表示

③の複数登録されているレビュー評価をスクリプトに渡してそれぞれの星形の評価として表示するには引数として値を渡してあげればいいと考えたのですがうまく行きません。

どのように値の受け渡しを行えばよろしいでしょうか？

現状のソースは以下のとおりとなります。

<?php
//確認用として3つ変数を用意
$reviewValue1 = 1;
$reviewValue2 = 2;
$reviewValue3 = 3;
?>

<div class="jRateReviewd" value="<?php echo $reviewValue1; ?>"></div>
<div class="jRateReviewd" value="<?php echo $reviewValue2; ?>"></div>
<div class="jRateReviewd" value="<?php echo $reviewValue3; ?>"></div>

<script>
$(".jRateReviewd").jRate({
  precision : 0.5, 
  rating : $(".jRateReviewd").val();, //DBから取得していきた評価値をphpから受けとる
  readOnly:true
});
</script>

よろしくお願い致します。

Answer 1

公式サイトのサンプルにありました。

$("#jRate").jRate({
	rating: 1// ここに渡す
});

つまり: rating: <?=$reviewValue1?>

1回のjRateメソッドでは完結できないようです。

なお、jQuery では$(".jRateReviewd").val()というコードは、そのクラス名の要素が複数ある場合は一番最初に見つかった要素の value 値を返すため、ここでは不適切です。
また、div要素にはvalue属性は存在しません。
基本的に属性の種類は勝手に作ることはできません。
今回は関係ないと思いますが、作りたい場合は「カスタムデータ属性」という仕様を利用します。

Comments

[退会済みユーザー]

tozjpさん

ご回答ありがとうございます。

一応、教えていたやり方でjQueryに対して値の受け渡しは成功しました。
ただ、DBからレビュー数値を取得してきてレビュー数だけループを回し、星評価を表示する必要があると思うのですが、現在のやり方だと最後に読み込んだ数値の星評価が全てのレビューに反映されてしまいます。
（私の$reviewValue1,2,3っていう例えが悪かったですね、すいません。。。）

イメージだと以下のようになるかと思われます。

--
for(取得したレビュー数の数だけループ){
<div class="jRateReviewd"></div>
}

$(".jRate").jRate({
rating: <?php echo $reviewValue ?>
});

--

上記の場合ですと、最後に読み込んだ$reviewValueの値が[4]だとすると、それまでに出力した全ての評価数[4]として表示されてしまいます。
それぞれの評価数を値を受け渡し、jRateの結果を次に読み込んでも保持しておくやり方などはありますか？
jQueryに関しては勉強不足なので、何卒、ご教授をお願い致します。

[tozjp]

$(".jRate") は同クラス名の要素すべてが対象です。
今回のケースのように一つだけに絞り込んで要素を特定したい場合は、IDを利用します。
(これは jQuery ではなく HTML の使い方の話です。)
div にクラスだけではなく ID を振って、jQuery には ID セレクターで指定します。

ただ、あえてやり方を解説するならば今回に限ってはベストな方法とは思いません。
ここは回答に書いた「カスタムデータ属性」(data-* 属性) が使いやすいです。

<div class="jRateReviewd" data-reviewed-value="3"></div>
とすると、
$(".jRateReviewd").data("reviewed-value")
$(".jRateReviewd").data("reviewedValue")
$(".jRateReviewd").data().reviewedValue
のどれかで 3 が取得できます。
当初試されていた方法に近いです。

ただ、これでは同クラス名の一番上の要素が対象となるので、各要素それぞれの値を個別に処理する必要があります。
jQuery にはそれぞれを処理するメソッドが用意されています。その名も「each (それぞれ)」です。
使用方法は以下のようになります。

/**
* .jRateReviewd 要素に jRate を設定する処理 (each メソッドコールバック用)
* @param index {number} .jRateReviewd 要素に振られた連番の現在位置
* @param element {HTMLDivElement} 現在処理している .jRateReviewd 要素
*/
function setupJRate (index, element) {
/** @var {JQuery} 現在処理している .jRateReviewd 要素 */
var jRateReviewd = $(element); // element として渡されるのは生の HTMLDivElement オブジェクトなので、jQuery を使った処理をするために JQuery オブジェクトに変換する。$(this) でも多くの場合うまくいく。

/** @var {number} 対象の評価値 */
var reviewedValue = jRateReviewd.data().reviewedValue; // カスタムデータ属性に埋め込んだ値を取得。

// 各要素に jRate を設定する
jRateReviewd.jRate({
precision: 0.5,
rating: reviewedValue,
readOnly: true,
});
};

// すべての .jRateReviewd 要素を取得して、要素数分 setupJRate をコールさせる
$(".jRateReviewd").each(setupJRate);

わかりやすさ重視で回りくどい書き方になっています。

setupJRate は .jRateReviewd の個数分よばれて、内部では第2引数に対して行う限り、単一の要素に対する処理になります。

setupJRate 内で $(".jRateReviewd ").xxx(....) なんてやるとまた全て取ってきてしまって台無しなので気をつけてください。