Как сохранить атрибут "title" для "a" с помощью jQuery?

ProgramBox

Как сохранить атрибут «title» для «a» с помощью jQuery?

Post author:admin
Запись опубликована:9 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Как я могу сохранить значение заголовка для строки? Это значения title=%s:

 <a class="false" title=1106 href="/useradminpage?main_id=%samp;display=false"><span class="small">(hide)</span></a>

<a class="false" title=1153 href="/useradminpage?main_id=%samp;display=false"><span class="small">(hide)</span></a>

<a class="false" title=1175 href="/useradminpage?main_id=%samp;display=false"><span class="small">(hide)</span></a>

…

Я пробовал бесчисленные варианты, но ни один из них не работает. Это то, что у меня есть сейчас:

 <script>

$(document).ready(function() {

    console.log("ready");

    $("a.false").click(function(e) {
        $(this).closest("tr.hide").hide("slow");
        var main_id = a.title;
        var display = "false";
        e.preventDefault();

    });

    $("a.false").click(function() {

        $.ajax({
            url: "/useradminpage?main_id=%samp;display=false",
            data: {main_id: "main_id", display: "display"},
            success: function(data) {
            display_false()
            alert("4 - returned");
            }

        });

    });
});
</script>

Это третий вопрос по этой теме. Я ценю любую помощь. Спасибо.

1. Значения ваших title атрибутов действительно должны быть в кавычках

2. @ Clive: Как упоминали другие var main_id = this.title; , работает, придавая значение названию.

3. Я имел в виду, что в вашем HTML-коде 🙂 title=1106 должно быть title="1106" . Это просто хорошая практика

4. Хорошо, спасибо, исправлено. По какой-то причине я думал, что мне не нужно ставить кавычки, когда я использую форматирование строки с. %s

Ответ №1:

вместо

     var main_id = a.title;

попробуйте

     var main_id = $(this).attr('title');

потому что, если я не ошибаюсь, «a» не определено

Ответ №2:

Я думаю, что то, что вы пытаетесь сделать, это передать значение title атрибута в вашем запросе AJAX. Если это так, проще всего сделать все это в одном обработчике событий (есть ли причина, по которой вы привязываете 2 разных обработчика к одному и тому же событию?):

 $("a.false").click(function(e) {
    $(this).closest("tr.hide").hide("slow");
    var main_id = this.title;
    var display = "false";
    e.preventDefault();
    $.ajax({
        url: "/useradminpage",
        data: {main_id: main_id, display: display},
        success: function(data) {
            display_false();
            alert("4 - returned");
        }

    });
});

В настоящее время ваша проблема заключается в том, что main_id и display не входят в область второго прослушивателя событий, поэтому будут неопределенными (и их не следует заключать в кавычки, иначе вы просто передаете строки). Поскольку вы передаете data объект в ajax функцию, вам также не нужно добавлять строку запроса в URL.

Кроме того, когда вы присваиваете значение main_id , вы используете a.title . В этом случае a значение не определено, и вам нужно будет использовать this , который будет ссылкой на выбранный элемент.

1. @ James Allardice: Спасибо! Это выглядит красиво и отлично работает, и спасибо за подробное объяснение. Можете ли вы прояснить еще одну вещь? Я ошибочно подумал, что мне нужно вызвать функцию, которая обновляет базу success: данных, поэтому у меня display_false(); там есть. Но эта строка выдает a Uncaught ReferenceError: display_false is not defined , и когда я комментирую эту строку, база данных все еще обновляется. Итак, что мне нужно поместить внутрь success: ? В документации говорится «Функция, которая будет вызвана, если запрос будет выполнен успешно», что меня смущает. Еще раз спасибо.

2. Я думаю, что вы попытались вызвать функцию PHP из JavaScript внутри success обратного вызова. Это никогда не сработает, потому что PHP выполняется на сервере, а JS — на стороне клиента. Обратный success вызов — это просто функция, которая запускается, когда вызов AJAX завершает выполнение. Вы могли бы, например, использовать его для отображения пользователю сообщения об успешном завершении.

Ответ №3:

Я подозреваю, что, возможно, я что-то упускаю, но я подозреваю, что ваша проблема заключается в использовании a.title вместо this.title :

 $("a.false").click(function(e) {
    $(this).closest("tr.hide").hide("slow");
    var main_id = this.title; // or you could use the jQuery object approach: $(this).attr('title') instead
    var display = "false";
    e.preventDefault();
});

Проблема в вашем первоначальном подходе заключается в том, что a он будет анализироваться как переменная, которой не было присвоено значение и не было объявлено, чтобы она возвращала undefined or null (в лучшем случае). В рамках each() метода вы перебираете отдельные узлы; поэтому для доступа к свойствам / атрибутам этого узла используйте this .

Ответ №4:

Чтобы получить доступ к любому атрибуту элемента DOM через jQuery, вы можете использовать функцию .attr() . В вашем конкретном случае вы бы сделали.

 var main_id = $(this).attr('title');