0

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 需要更改？

4

1 回答 1

1

页面上的 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();
            }
        });
    }
});

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

于 2013-05-21T16:11:16.113 回答