php - JQuery:如何将这个点击功能应用到页面上同一类的所有元素？

Question

我的页面由从数据库检索的记录列表组成，当您单击某些 span 元素时，它会更新数据库，但目前这只适用于要显示的第一条记录。

(基本上将 0 更改为 1，反之亦然)

这是我在页面上的两个 html 元素，它们在循环内回显:

Featured:<span class="featured-value">'.$featured.'</span>
Visible:<span class="visible-value">'.$visible.'</span>

这是我所拥有的:

$(document).ready(function() {           
    $('.featured-value').click(function() {
            var id = $('.id-value').text();
            var featured = $('.featured-value').text();
            $('.featured-value').fadeOut('slow');

            $.ajax({
                type: "POST",
                url: "process.php",
                data: "id="+id+"&featured="+featured,
                success: function(data) {
                    $('.featured-value').html(data);
                    $('.featured-value').fadeIn('slow');        
                }
            });
        return false;
    });

    // same function for a different span
    $('.visible-value').click(function() {
        var id = $('.id-value').text();
        var visible = $('.visible-value').text();
        $('.visible-value').fadeOut('slow');

        $.ajax({
            type: "POST",
            url: "process.php",
            data: "id="+id+"&visible="+visible,
            success: function(data) {
                $('.visible-value').html(data);
                $('.visible-value').fadeIn('slow');     
            }
        });
        return false;
    });
});

使用 id 属性的情况下工作正常，但现在我使用类，成功查询的 fadeIn 部分不起作用，但我希望 .each将解决这个问题。

更新完整的循环如下:

while ($event = $db->get_row($events, $type = 'MYSQL_ASSOC'))
{
    // open event class
    echo '<div class="event">';

    echo '<div class="id"><span class="row">Event ID:</span><span class="id-value"> '.$id.'</span></div>';

    echo '<div class="featured"><span class="row">Featured: </span><span class="featured-value">'.$featured.'</span></div>';
    echo '<div class="visible"><span class="row">Visible: </span><span class="visible-value">'.$visible.'</span></div>';

    echo '</div>';
}

Answer 1

Cymen 关于 id 选择器给你带来麻烦的说法是正确的。另外，我决定为您重构它。可能需要一些调整，但不是一切都可以吗？

function postAndFade($node, post_key) {
    var id = $node.parents('.id').find('.id-value').text();
    var post_val = $node.text();
    $node.fadeOut('slow');

    $.ajax({
        type: "POST",
        url: "process.php",
        data: "id="+id+"&"+post_key+"="+post_val,
        success: function(data) {
           $node.html(data);
           $node.fadeIn('slow');        
        }
    });
    return false;
}

$('.featured-value').click(function() { return postAndFade($(this), 'featured'); });

$('.visible-value').click(function() { return postAndFade($(this), 'visible'); });