JQuery:如何将此click函数应用于页面上同一类的所有元素 - JQuery: How to apply this click function to all elements of the same class on the page?

JQuery: How to apply this click function to all elements of the same class on the page?

我的页面包含从数据库检索到的记录列表，当您单击某些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>';
}

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

click函数在每次单击时获得相同的id和值，因为您已将其绑定到类。相反，你可以利用事件。目标假定这些值位于被单击的项上。如果没有，则需要使用event。定位并导航到行内的项。

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

之类的东西但它可能不起作用因为它需要根据你的HTML自定义