Php jQuery：更改图像src&；类onclick_Php_Jquery_Ajax_Onclick

Php jQuery：更改图像src&；类onclick

php jquery ajax

Php jQuery：更改图像src&；类onclick,php,jquery,ajax,onclick,Php,Jquery,Ajax,Onclick,jQuery： HTML: $fileScore 这就是我所拥有的，它运行得非常好。问题是我知道有一种方法可以让这比我现有的更有效率此外，如何选择该跨度以更改其值？我将如何根据当前设置的值来调整该值？我在这件事上挣扎了很长时间 <div> <a href="vote.php?comic=$fileName&type=upvote" id="$fileName" class="upvote$guestLink" onclick="return fal

jQuery：

HTML:


$fileScore

这就是我所拥有的，它运行得非常好。问题是我知道有一种方法可以让这比我现有的更有效率

此外，如何选择该跨度以更改其值？我将如何根据当前设置的值来调整该值？我在这件事上挣扎了很长时间

<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>

我改变了什么：

设置

id

变量：假设在函数

中this

是DOM元素，您可以直接说

this.id

，而不是使用

$（this.attr（'id'）

创建jQuery对象

缓存主要jQuery对象：而不是重复

$（this）.children（'img'）

（我已经为此创建了一个变量

$img

）

添加了一个if/else：三元运算符

？

在一般意义上很好，但是您使用了两次（一次用于

changeImage

，一次用于

changeClass

）来评估相同的条件。对我来说，在

if

中评估该条件一次，然后设置这两个变量更有意义

更改属性：您调用了两次

.attr（）

，但您可以向其传递属性映射，然后一次更改所有属性

此外，如何选择该跨度以更改其值？我将如何根据当前设置的值来调整该值

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

$(".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
        }
    });
});

还请注意，您为span指定了一个id，该id与它上面的锚元素的id相同-这会使您的html无效，因为该id在页面上应该是唯一的。我假设您不能按id选择，因为页面上有多个投票元素

关于设置值，要获取JS中的当前值和增量：

// 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");

将回调传递给的语法为您提供一个具有旧值的参数，然后返回要设置的新值。因此，

+oldHTML

将字符串转换为一个数字-显然，我在这里假设span只包含一个数字-然后向其中添加一个

但是，我认为在ajax成功处理程序中使用来自服务器的数据更好：让PHP代码返回新值，然后在成功处理程序中应用该值