Question

我很想知道，我怎么能让Javascript使用重复的javascript代码将“开始评级”直接发送到我的rating.php。

就像它的方式一样，代码有点长，甚至认为它有效。我只需要一个简单的，更少的代码版本的javascript。

有人可以帮我解决这个问题。我尝试了一些，但它们对我不起作用。

所以我发送了我认识的作品。

Javascript：

function mystar5() {
    var rate = document.getElementById("star5").value;
    $.post( "rating.php", { rating: rate}, function(output) {
        $("#output").html(output);
    })
};
function mystar4() {
    var rate = document.getElementById("star4").value;
    $.post( "rating.php", { rating: rate}, function(output) {
        $("#output").html(output);
    })
};
function mystar3() {
    var rate = document.getElementById("star3").value;
    $.post( "rating.php", { rating: rate}, function(output) {
        $("#output").html(output);
    })
};
function mystar2() {
    var rate = document.getElementById("star2").value;
    $.post( "rating.php", { rating: rate}, function(output) {
        $("#output").html(output);
    })
};
function mystar1() {
    var rate = document.getElementById("star1").value;
    $.post( "rating.php", { rating: rate}, function(output) {
        $("#output").html(output);
    })
};

HTML：

<div id="dv1">
    <!-- star rating -->
    <h4>Simple Rating System</h4>

    <fieldset class="rating" onclick="mystar()">
        <input onclick="mystar5()" class="stars" type="radio" id="star5" name="rating" value="5" />
        <input onclick="mystar4()" class="stars" type="radio" id="star4" name="rating" value="4" />
        <input onclick="mystar3()" class="stars" type="radio" id="star3" name="rating" value="3" />
        <input onclick="mystar2()" class="stars" type="radio" id="star2" name="rating" value="2" />
        <input onclick="mystar1()" class="stars" type="radio" id="star1" name="rating" value="1" />
    </fieldset>

Answer 1

单程

function myStars(num) {
    $.post("rating.php",
           {rating: num}, 
           function(output) { $("#output").html(output); }
    )
}

用

<input onclick="myStars(5);" class="stars" type="radio" id="star5" name="rating" />
<input onclick="myStars(4);" class="stars" type="radio" id="star4" name="rating" />

Answer 2

两种选择：

创建一个通过参数传递速率的函数：

function mystars(rate) {
    $.post( "rating.php", { rating: rate}, function(output) {
        $("#output").html(output);
    })
};

用法：

<input onclick="mystars(5)" class="stars" type="radio" id="star5" name="rating" value="5" />

或创建一个与你的html绑定的函数（如果参数更长，更有用，例如文本段落）但不太灵活

function mystars() {
    var rate = $(this).val()
    $.post( "rating.php", { rating: rate}, function(output) {
        $("#output").html(output);
    })
};

用法：

<input onclick="mystars()" class="stars" type="radio" id="star5" name="rating" value="5" />

如果您喜欢html中的onclick，我会选择第一种情况。

或者，将标记与处理分开，并在加载时添加点击处理程序：

<input class="stars" type="radio" id="star5" name="rating" value="5" />

（注意没有onclick）

function mystars(rate) {
    $.post( "rating.php", { rating: rate}, function(output) {
        $("#output").html(output);
    })
};
$(function() {
    $(".stars").on("click", function() {
        mystars($(this).val());
    });
});

如何简化javascript提交表单

2 个答案: