javascriptで同じ動作を増やしたい時

質問

初心者で用語等の知識が不十分なため、伝わりにくいことがありますので、ご了承下さい。

javascriptで、下記のようなシステムを使用しているのですが、
同じシステム（PHP部）を同一ページに使用したい場合、
どのようにjavascript部を応用すれば良いのでしょうか。

PHP部：
<div id="rating">
<pre>
<ul class="star-rating">
<li class="current-rating" id="current-rating" style="width: <?php $ratingpx = $rating *25; echo $ratingpx;?>px"><!?Currently <? echo $rating ?>/5 Stars.></li>
<li><a href="javascript:rateImg(1,'hyouka')" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="javascript:rateImg(2,'hyouka')" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="javascript:rateImg(3,'hyouka')" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="javascript:rateImg(4,'hyouka')" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="javascript:rateImg(5,'hyouka')" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>
</pre>
</div>

javascript部（この部分かと思うのですが）：
function rateImg(rating,imgId) {
remotos = new datosServidor;
nt = remotos.enviar('update.php?rating='+rating+'&imgId='+imgId);
rating = (rating * 25) - 8;
document.getElementById('current-rating').style.width = rating+'px';
document.getElementById('ratingtext').innerHTML = 'Thank you!';
}

ヒントでもかまいません、どうかご教授お願い致します。

回答No.1

OrangeCup150 · ベストアンサー

手っ取り早く修正するなら*コピペした後、タグの id の語尾にA,B,...を付けます。
JavaScript の関数もコピペで複製して id が対応するようにします。
クエリ変数名も末尾にA,B,...を付けます。

<div id="rating●"> -> <div id="rating-A">, <div id="rating-B">
current-rating● -> current-rating-A, current-rating-B
ratingtext● -> ratingtext-A, ratingtext-B
rateImg● -> rateImgA, rateImgB
$rating● -> $ratingA, $ratingB
update.php?rating● -> update.php?ratingA, update.php?ratingB

PHP部：
<div id="rating●">
<pre>
<ul class="star-rating">
<li class="current-rating" id="current-rating●" style="width: <?php $ratingpx = $rating● *25; echo $ratingpx;?>px"><!?Currently <? echo $rating ?>/5 Stars.></li>
<li><a href="javascript:rateImg●(1,'hyouka')" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="javascript:rateImg●(2,'hyouka')" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="javascript:rateImg●(3,'hyouka')" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="javascript:rateImg●(4,'hyouka')" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="javascript:rateImg●(5,'hyouka')" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>
</pre>
</div>

ここら辺にあると推測される id="ratingtext●"

javascript部（この部分かと思うのですが）：
function rateImg●(rating,imgId) {
remotos = new datosServidor;
nt = remotos.enviar('update.php?rating●='+rating+'&imgId='+imgId);
rating = (rating * 25) - 8;
document.getElementById('current-rating●').style.width = rating+'px';
document.getElementById('ratingtext●').innerHTML = 'Thank you!';
}

大体、こんな感じでしょうか。

* 好ましい修正とは言えませんが

お礼

ありがとうございました!!

補足

ありがとうございます!!

>>タグの id の語尾にA,B,...を付けま
丁寧にありがとうございます!!私、●を付ける位置間違えてて…
本当わかりやすい、早速試させていただきます!!

>>* 好ましい修正とは言えませんが
やはりですか、ちょっとかなーーーりの数増えると思うので、作りなおしたかったのですが何せ初心者で、とりあえず急ぎ動く状態が欲しかったので、
動いた後細かく良い感じに修正しようと思っていました。

捕捉で失礼しました、お礼の方はまた後ほどさせていただきます!!