jQueryの$ .post（）が機能しない

StackOverflow https://stackoverflow.com/questions/1401629

  •  05-07-2019
  •  | 
  •  

質問

評価システムを作成していますが、index.phpページに次のjQueryコードがあります：

<script type="text/javascript">

$(document).ready(function() {

    $("[id^=rating_]").hover(function() {

        var rid = $(this).attr("id").split("_")[1];
        $("#rating_"+rid).children("[class^=star_]").children('img').hover(function() {

            $("#rating_"+rid).children("[class^=star_]").children('img').removeClass("hover");

            /* The hovered item number */
            var hovered = $(this).parent().attr("class").split("_")[1];
            var hovered2 = $(this).parent().attr("class").split("_")[1];

            while(hovered > 0) {
                $("#rating_"+rid).children(".star_"+hovered).children('img').addClass("hover");
                hovered--;
            }

            $("#rating_"+rid).children("[class^=star_]").click(function() {
                var current_star = $(this).attr("class").split("_")[1];

                $.post("send.php", {rating: current_star, id: rid});
            });
        });

    });




});

</script>

基本的にホバー効果があり、星をクリックすると、クリックされた評価の情報と要素のIDとともに、send.phpに投稿リクエストが送信されます。このスクリプトの下には、次のようなPHPがあります。

<?php


$query = mysql_query("SELECT * FROM test");

while($row = mysql_fetch_array($query)) {
    $rating = (int)$row[rating];
    ?>
    <div id="rating_<?php echo $row[id]; ?>">
    <span class="star_1"><img src="star_blank.png" alt="" <?php if($rating > 0) { echo"class='hover'"; } ?> /></span>
    <span class="star_2"><img src="star_blank.png" alt="" <?php if($rating > 1.5) { echo"class='hover'"; } ?> /></span>
    <span class="star_3"><img src="star_blank.png" alt="" <?php if($rating > 2.5) { echo"class='hover'"; } ?> /></span>
    <span class="star_4"><img src="star_blank.png" alt="" <?php if($rating > 3.5) { echo"class='hover'"; } ?> /></span>
    <span class="star_5"><img src="star_blank.png" alt="" <?php if($rating > 4.5) { echo"class='hover'"; } ?> /></span>
    <div class="clearleft">&nbsp;</div>
    </div>
    <br />
    <?php   
}

?>

そしてもちろん、見た目を良くするCSSがあります。

send.phpファイルは次のようになります。

<?php

mysql_connect("localhost", "admin", "") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());


$rating = (int)$_POST['rating'];
$id = (int)$_POST['rid'];



$query = mysql_query("SELECT * FROM test WHERE id = '".$id."'") or die(mysql_error());

while($row = mysql_fetch_array($query)) {

    if($rating > 5 || $rating < 1) {
        echo"Rating can't be below 1 or more than 5";
    }
    else {

        $total_ratings = $row['total_ratings'];
        $total_rating = $row['total_rating'];
        $current_rating = $row['rating'];

        $new_total_rating = $total_rating + $rating;
        $new_total_ratings = $total_ratings + 1;
        $new_rating = $new_total_rating / $new_total_ratings;


        // Lets run the queries. 

        mysql_query("UPDATE test SET total_rating = '".$new_total_rating."' WHERE id = '".$id."'") or die(mysql_error());
        mysql_query("UPDATE test SET rating = '".$new_rating."' WHERE id = '".$id."'") or die(mysql_error());
        mysql_query("UPDATE test SET total_ratings = '".$new_total_ratings."' WHERE id = '".$id."'") or die(mysql_error());
    }

}




?>

データベーステーブルには3つの評価列があります。 total_rating：合計評価（すべての評価が加算されます）。 評価：現在の評価 total_ratings：評価の量。

問題は、$ _ POST ['rating']および$ _POST ['rid']を$ _GETに変更し、URLに情報を入力すると、たとえばsend.php？id = 1 <！> amp; rating = 4、動作し、データベースが更新されます。ただし、星を押すと、データベースは更新されません。スクリプトをいじくり回した後、投稿が機能している必要があることに気付きましたが、IDは0を返します。

これをさらにテストするには、クリック機能にこれを追加します：

document.write(current_star+rid);

返された内容を確認します。問題は、返される数値に要素の上にカーソルを置いた回数が乗算されることです。したがって、6つの星の上にカーソルを合わせると、current_starとIDが6回繰り返されます。

私はこれをうまく機能させようとしているように感じていますが、何が起こっているのか誰にも分かりませんか？事前に感謝します。

役に立ちましたか？

解決

jQueryのイベント処理について重要なことは、レジストリベースであるということです。つまり、jQueryを使用すると、特定のイベントに対して複数の コールバックを登録でき、バインドされました。

current_starとidの値が繰り返し表示されるのは、ホバーするたびにより多くのイベントをバインドし続けるためです。これは、click()呼び出しの中にhover()呼び出しがあるため、ホバーするたびに別のclick（）イベントをバインドするためです。

次のような方法で、ホバーイベントの外部で<=>イベントをバインドしてみてください：

$("[id^=rating_]").children("[class^=star_]").click(function() {
        var rid = $(this).parent().attr("id").split("_")[1];
        var current_star = $(this).attr("class").split("_")[1];

        $.post("send.php", {rating: current_star, id: rid});
});

また、同じ理由で、1つの<=>呼び出しをもう1つの呼び出しの中にバインドしたくないでしょう。

他のヒント

$_POST['rid']の代わりに$_POST['id']を使用していることに気付きました。それがあなたの問題かもしれません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top