在循环中调用JS函数并指定调用位置

Calling a JS function in a loop and specify where it was called

本文关键字：调用 位置 JS 循环 函数      更新时间：2023-09-26

Javascript新手，抱歉，如果这是一个愚蠢的问题!

我很难解释这一点，但我有一个简单的拇指向上/向下系统，像这样:

//thumbs up down reviews
$(function addThumbs() {
    $(".vote-up").click(function() {
        var review_id = $('#review_id').val();
        var user_id = $('#user_id').val();
        if (user_id == '') {
            alert('no user id');
        } else {
            $("#flash").show();
            $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
            $.ajax({
                type: "POST",
                url: "ajax-thumbsup.php",
                data: {
                    "user_id": user_id,
                    "review_id": review_id //we are passing the name value in URL
                },
                cache: false,
                success: function(html) {
                    $('#vote-up').attr('src', 'img/upgreen.png');
                }
            });
        }
        return false;
    });
});

$(function addThumbsDown() {
    $(".vote-down").click(function() {
        var review_id = $('#review_id').val();
        var user_id = $('#user_id').val();
        if (user_id == '') {
            alert('nouserid');
        } else {
            $("#flash").show();
            $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
            $.ajax({
                type: "POST",
                url: "ajax-thumbsdown.php",
                data: {
                    "user_id": user_id,
                    "review_id": review_id //we are passing the name value in URL
                },
                cache: false,
                success: function(html) {
                    $('#vote-down').attr('src', 'img/downred.png');
                }
            });
        }
        return false;
    });
});

我的html是这样的:

<div class="row">
    <div class="thumbs">
        <input type="hidden" id="review_id" value="11" />
        <input type="hidden" id="user_id" value="5" />
        <div id="pluses">0</div> <div id="progressdiv"></div>
        <a><img id="vote-up" class="vote-up" src="img/up.png" alt="thumbs up" /> </a>
        <a><img id="vote-down" class="vote-down" src="img/down.png" alt="thumbs down" /> </a>
        <div id="minuses">0</div>
    </div>
    comments/likes
</div>

<div class="row">
    <div class="thumbs">
        <input type="hidden" id="review_id" value="12" />
        <input type="hidden" id="user_id" value="5" />
        <div id="pluses">0</div> <div id="progressdiv"></div>
        <a><img id="vote-up" class="vote-up" src="img/up.png" alt="thumbs up" /> </a>
        <a><img id="vote-down" class="vote-down" src="img/down.png" alt="thumbs down" /> </a>
        <div id="minuses">0</div>
    </div>
    comments/likes
</div>

如果我点击第二个大拇指，第一个变成绿色，我怎么告诉javascript哪个img#vote-down需要改变?

页面上的id必须是唯一的，您需要使其通用。您应该做的是使用一个公共类来引用元素。this作用域将为您提供单击的元素，您可以遍历树以找到您要查找的元素。

将id转换为类并组合逻辑，以便您只有一个函数。

$(".thumbs").on("click", "img", function (e) {
    var img = $(this),
        isUpVote = img.hasClass("vote-up"),
        thumbsElem = img.closest(".thumbs"),
        review_id = thumbsElem.find(".review_id").val(),
        user_id = thumbsElem.find(".user_id").val(),
        active = isUpVote ? "up" : "down",
        inactive = isUpVote ? "down" : "up";
    e.preventDefault();
    if (user_id == '') {
        alert('nouserid');
    } else {
        $("#flash").fadeIn(400).html('<img src="ajax-loader.gif" />Loading Comment...');
        $.ajax({
            type: "POST",
            url: "ajax-thumbs" + active  + ".php",  //You really should just have one php, pass up up or down!
            data: {
                "user_id": user_id,
                "review_id": review_id //we are passing the name value in URL
            },
            success: function (html) {
                thumbsElem.find(".vote-" + active).prop('src', 'img/' + active + 'red.png');
                thumbsElem.find(".vote-" + inactive).prop('src', 'img/' + active + '.png');
            },
            error: function () {
                alert("Your vote was not counted because of an error, try again");
            },
            complete: function () {
                $("#flash").stop().hide();
            }
        });
    }
});

结合逻辑和添加一个简单的检查意味着你不必维护两组基本上做同样事情的代码。

相关文章：