JQuery: Как применить эту функцию щелчка ко всем элементам одного класса на странице? - PullRequest
Новая
       2

JQuery: Как применить эту функцию щелчка ко всем элементам одного класса на странице?

2 голосов
/ 05 октября 2011

Моя страница состоит из списка записей, извлеченных из базы данных, и когда вы нажимаете на определенные элементы 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>';
}

Ответы [ 2 ]

3 голосов
/ 05 октября 2011

Cymen прав насчет селектора идентификаторов, вызывающего у вас проблемы.Кроме того, я решил изменить это для вас.Может быть, нужны некоторые настройки, но не все? 

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'); });
2 голосов
/ 05 октября 2011

Функция щелчка получает одинаковые идентификатор и значение при каждом щелчке, потому что вы привязали его к классу. Вместо этого вы можете воспользоваться event.target, предполагая, что эти значения находятся на элементе, по которому вы щелкаете. Если нет, вам нужно использовать event.target и перейти к элементам в строке. 

$('.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.

...