Как я могу использовать ссылку href в атрибуте "data" - или переписать ее с помощью jQuery?

ProgramBox

Как я могу использовать ссылку href в атрибуте «data» — или переписать ее с помощью jQuery?

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

#jquery #html

#jquery #HTML

Вопрос:

Я использую атрибут data, чтобы показать оценку фотографии на сайте:

 <div id="test" data-credit="name">

Но как мне использовать ссылку, подобную этой?:

 <div id="test" data-credit="<a href="http://mydomain.com">name</a>">

Экранирование html, подобное этому, не работает:

 amp;<a href=amp;quot;http://mydomain.comamp;quot; amp;>nameamp;</aamp;>

Это невозможно сделать, как бы я использовал jQuery, чтобы переписать данные из « name » в « <a href="http://mydomain.com">name</a> » в готовом документе?

JSfiddle здесь: http://jsfiddle.net/8muBm/58 /

1. Почему вы хотите сохранить HTML в атрибуте HTML? Я бы сохранил имя и URL-адрес отдельно или в формате JSON и сгенерировал HTML динамически.

2. Просто для простоты. Но у меня возникли проблемы с тем, чтобы заставить ее работать простым способом.

Ответ №1:

data Атрибут является просто держателем строковой информации. Вероятно, вы могли бы добавить другой атрибут, например data-credlink="http://mydomain.com"

 $(document).ready(function () {
    $('div[data-credit]').each(function () {
        var THIS = $(this),
            link = $('<a>', {'href': THIS.attr('data-credlink'),
                              'text': THIS.attr('data-credit')
                            });
        THIS.append(link);
    });
})

<div id="test" data-credit="name" data-credlink="http://mydomain.com"></div>

Ответ №2:

Проблема заключается в двойных кавычках вокруг значения href. Поскольку вы используете двойные кавычки для атрибута data-credit, вам нужно будет заменить кавычки вокруг атрибута href на одинарные кавычки. В противном случае вы закрываете двойные кавычки для данных открывающей двойной кавычкой href.

Попробуйте:

 <div id="test" data-credit="<a href='http://mydomain.com'>name</a>">

Если HTML-разметка соответствует, вы могли бы легко получить доступ к атрибуту data-credit, например:

 $('#test').attr('data-credit');

1. Не повезло с одинарными кавычками; Я распечатываю разметку, но это просто html, а не ссылка.

2. В строке, в которой вы выводите ссылку, используйте метод html, а не текстовый метод. Используйте: $ («#photocredit»).html($(ui.panel).data(«credit»));

3. Текстовый метод избегает любых html-объектов, поэтому теги отображаются буквально, а не интерпретируются как html.

Ответ №3:

Это должно выполнить перезапись с помощью jQuery:

 $("div[data-credit]").each(function(){
    $(this).attr("data-credit",'<a href="http://mydomain.com">'  $(this).attr("data-credit") '</a>');
});

Он ищет все элементы div с атрибутом data-credit, получает этот атрибут, оборачивает его вокруг этого URL и присваивает его обратно атрибуту. Но, как уже спрашивал Феликс, зачем вам хранить там полный HTML-код?

Пример: http://jsfiddle.net/niklasvh/fBW4V /

Ответ №4:

По сути, вы используете двойные кавычки внутри двойных кавычек, это делает атрибут недействительным. Вам нужно либо заменить заключающие кавычки в одинарные кавычки, либо заменить кавычки внутри значения атрибута на одинарные кавычки.

Вот что я имею в виду:

 <div id="test" data-credit="<a href='http://example.com'>name</a>">

Вот простой пример, который вы можете использовать для тестирования:

 <head>
<!-- Assume jQuery is loaded -->
<script type="text/javascript">
$(document).ready(function() {
    $("#v").val($("#test").attr("data-credit"));
});
</script>

</head>
<body>

<div id="test" 
    data-credit="<a href='http://example.com'>name</a>">
<input id="v" type="text" value="" />

</body>
</html>

Обратите внимание, что использование экранированного html, похоже, работает.

1. Не знаю почему, но одинарные кавычки не работают: я вижу отображаемую разметку вместо отображаемой ссылки.

2. Запустил JSfiddle: jsfiddle.net/8muBm/58

3. @songdogtech: На самом деле, ваша версия (с моим предложением) действительно работает , вам просто нужно заменить вызов text на вызов html ; вы хотите отображать <a href='http://mydomain.com'>name</a> не как текст, а как HTML .