Функция запуска JQuery для одного из нескольких атрибутов

0

У меня есть страница уведомлений/входящих сообщений, где пользователю отображается список сообщений входящих сообщений, и я хочу, чтобы они могли отмечать каждое сообщение как прочитанное или просматриваемое с использованием JQuery. У меня есть этот код на данный момент:

<?php echo "<a href=\"#\" id=\"readLink\" data-note=\"$note_id\" class=\"red\">Mark As Read</a>"; ?>

<script type="text/javascript">
$('#readLink').on('click', function()
{
    var note = $(this).attr("data-note");
    jQuery.post("php/note-read.php", {
        note:note
    },  function(data, textStatus){
            if(data == 1){
                $('#readLink').html("Note Read");
            }
    });
    return false;
});
</script>

Этот скрипт отлично работает для последнего показанного сообщения, то есть верхнего первого сообщения в списке из 20, но не для любого другого. Может ли кто-нибудь увидеть способ заставить его работать над любым сообщением в списке?

  • 0
    Замените id на class, поскольку id предназначен для уникальных элементов, и почему вы проверяете только данные == 1? если данные увеличиваются в каждой строке, они будут работать для одной ссылки
  • 0
    Спасибо @RaunakKathuria - Это позволяет мне запускать функцию для любого атрибута, но теперь она помечает ВСЕ как прочитанное.
Показать ещё 2 комментария
Теги:
attributes

2 ответа

0
Лучший ответ

Я думаю, что решение - установить class, а не id. Код будет выглядеть так:

<?php echo "<a href=\"#\" class=\"readLink\" data-note=\"$note_id\" class=\"red\">Mark As Read</a>"; ?>

<script type="text/javascript">
$('.readLink').on('click', function()
{
    var $link = $(this);    //remember 'this' in a variable...
    var note = $(this).attr("data-note");
    jQuery.post("php/note-read.php", {
        note:note
    },  function(data, textStatus){
        if(data == 1){
            $link.html("Note Read");   //...and use this variable, because 'this' would not be the link
        }
    });
    return false;
});
</script>
Поделиться
  • 0
    Спасибо - это именно то, что мне было нужно и теперь работает нормально
  • 0
    Добро пожаловать :)
0
  • Заменить id классом
  • Замените $('.readlink').html("Note Read"); с этим that.html("Note Read"); поэтому он будет обновлять только выбранную/кликовую ссылку, где это $ (это), прежде чем вводить сообщение

Обновленный JS

<?php echo "<a href=\"#\" class=\"readLink\" data-note=\"$note_id\" class=\"red\">Mark As Read</a>"; ?>

<script type="text/javascript">
$('.readLink').on('click', function()
{

    var that = $(this);
    var note = that.attr("data-note");
    jQuery.post("php/note-read.php", {
        note:note
    },  function(data, textStatus){
            if(data == 1){
                that.html("Note Read"); //replace readlink class with this 
            }
    });
    return false;
});
</script>
Поделиться
  • 0
    Я думаю, в случае $(this).html("Note Read"); this будет объект JQuery AJAX, а не ссылка

Ещё вопросы

Сообщество Overcoder
Наверх
Меню