jQuery: изменение изображения и класса по клику

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
        }
    });
});

Что я изменил:

1. Установка переменной id: учитывая, что в функции this есть элемент DOM, вы можете сказать this.id непосредственно вместосоздание объекта jQuery с $(this).attr('id')
2. Кэширование вашего основного объекта jQuery: вместо повторения $(this).children('img') (для этого я создал переменную $img.)
3. Добавлен if /иначе: троичный оператор ? хорош в общем смысле, но вы использовали его дважды (один раз для changeImage и один раз для changeClass) для оценки того же условия.Для меня более логично оценивать это условие один раз в if и затем установить обе переменные.
4. Изменение атрибутов: вы дважды вызывали .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");

Обратите внимание, что вы указали, что охватывает идентификатор, который совпадает с идентификатором элемента привязки над ним - это делает вашHTML недействителен, потому что идентификатор должен быть уникальным на странице.Я предполагаю, что вы не можете выбрать по идентификатору, хотя, потому что у вас есть несколько элементов голосования на странице.

Что касается установки значения, чтобы получить текущее значение и приращение в JS:

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

Синтаксис передачи обратного вызова в .html() дает вам параметр со старым значением, а затем вы возвращаете новое значение для установки.Так что +oldHTML преобразует строку в число - очевидно, я предполагаю, что здесь диапазон содержит только число - и затем добавляет к нему единицу.

Однако я думаю, что было бы лучше сделать это вваш обработчик успеха ajax, использующий данные с сервера: ваш PHP-код должен вернуть новое значение, а затем в обработчике успеха применить это значение.