Question

jQuery的：

$(".upvote").click(function() {
    var id = $(this).attr('id');

    var changeImage = ($(this).children('img').attr('src') === siteUrl + '/images/icon-upvote.png')
                    ? siteUrl + '/images/icon-upvote-inactive.png' 
                    : siteUrl + '/images/icon-upvote.png';
    $(this).children('img').attr('src', changeImage);

    var changeClass = ($(this).children('img').attr('src') === siteUrl + '/images/icon-upvote.png')
                    ? 'vote-icon' 
                    : 'vote-icon semi-transparent-more';
    $(this).children('img').attr('class', changeClass);

    $.ajax({
        type: 'GET',
        data: 'comic=' + id + '&type=upvote',
        url: siteUrl + '/vote.php',
        success: function() {
            // PHP does all checks
        }
    });
});

HTML：

<div>
    <a href="vote.php?comic=$fileName&amp;type=upvote" id="$fileName" class="upvote$guestLink" onclick="return false;">$upvoteImage</a>
</div>
<div style="margin: 5px 0 8px 0;">
    <span class="score$scoreStyle bold" id="$fileName">$fileScore</span>
</div>
<div>
    <a href="vote.php?comic=$fileName&amp;type=downvote" class="downvote$guestLink">$downvoteImage</a>
</div>

这就是我所拥有的，而且效果非常好。问题是我知道有一种方法可以使它比我的效率更高效。

另外，如何选择该范围来改变它的价值？我将如何根据当前设置的值调整值？我一直在努力争取最长时间。

Answer 1

$(".upvote").click(function() {
    var id = this.id,
        $img = $(this).children('img'),
        changeImage,
        changeClass;

    if ($img.attr('src') === siteUrl + '/images/icon-upvote.png') {
        changeImage = siteUrl + '/images/icon-upvote-inactive.png';
        changeClass = 'vote-icon';
    } else {
        changeImage = siteUrl + '/images/icon-upvote.png';
        changeClass = 'vote-icon semi-transparent-more';
    }

    $img.attr({'src' : changeImage,
               'class' : changeClass });

    $.ajax({
        type: 'GET',
        data: 'comic=' + id + '&type=upvote',
        url: siteUrl + '/vote.php',
        success: function() {
            // PHP does all checks
        }
    });
});

我改变了什么：

设置id变量：假设在函数this中是DOM元素，你可以直接说this.id而不是用$(this).attr('id')创建一个jQuery对象
缓存主jQuery对象：而不是重复$(this).children('img')（我为此创建了一个变量$img。）
添加了if / else：三元运算符?在一般意义上很不错，但您使用了两次（一次用于changeImage，一次用于changeClass）来评估同样的条件。对我来说，在if中评估该条件一次然后设置两个变量更有意义。
更改属性：您正在调用.attr()两次，但您可以传递一个属性地图并立即更改它们。

另外，如何选择该范围来改变它的价值？我将如何根据当前设置的内容调整值？

如果它是一个与上下锚元素相同的div的孩子，那么选择会更容易一些，但无论如何你的结构可能是这样的：

// within the click handler for the upvote:
var $score = $(this).parent().next().find("span");
// or within the handler for the downvote:
var $score = $(this).parent().prev().find("span");

另请注意，您已经为该span指定了与其上方的anchor元素的id相同的id - 这会使您的html无效，因为id在页面上应该是唯一的。我假设你不能通过id选择，因为你在页面上有多个投票元素。

就设置值而言，获取JS中的当前值和增量：

$score.html(function(i, oldHTML) {
   return +oldHTML + 1;
});

将回调传递给.html()的语法为您提供了一个带旧值的参数，然后将新值返回到set。所以+oldHTML将字符串转换为数字 - 显然我假设这里的span只包含一个数字 - 然后再添加一个数字。

但是，我认为使用服务器中的数据在您的ajax成功处理程序中执行此操作会更好：让您的PHP代码返回新值，然后在成功处理程序中应用该值。

jQuery：更改图像src＆amp;课程onclick

1 个答案: