<a>頁面完全加載后，</a>如何正確修改HTML <a>標記</a>的“ href”屬性<a>？</a>

Question

我正在創建一個Flask“ Reddit clone”應用程序，其中最關鍵的功能之一就是查看和注釋線程。 當我渲染HTML文檔以顯示線程頁面（ thread.html ）時，我正在使用Jinja2的{% include %}功能加載子模板（ _thread.html ），該子模板包含允許用戶的<a>標記翻譯線程頁面的不同部分。 這個標簽應該觸發我編寫的Javascript函數，但是由於許多模板使用不同數量的標簽來調用_thread.html進行翻譯，因此我想在調用模板中修改<a>標簽的href屬性，但是不能弄清楚該怎么做。

如下面我的主調用模板（ thread.html ）所示，我嘗試使用JQuery的$(document).ready(function(){})構造來等待DOM加載，然后調用我的Javascript函數，傳遞要翻譯為我正在渲染的特定模板的標簽列表。 我嘗試同時使用.attr()函數和$.click函數，但是這兩個都沒有修改鏈接標記； href屬性保留為子模板說的虛擬#值。

app/templates/thread.html

{% extends "base.html" %}

{% block scripts %}
    {{ super() }}
    <script type="text/javascript">
        $(document).ready(function() {
            /*$('#translate_thread_link{{ thread.id }}').attr('href',"javascript:translate(
                                                                        ['#thread_title{{ thread.id }}', '#thread_body{{ thread.id }}'],
                                                                        '{{ g.locale }}',
                                                                        '#translate_thread_link{{ thread.id }}')");
            $('#translate_thread_link{{ thread.id }}').click(function() {
                translate(['#thread_title{{ thread.id }}', '#thread_body{{ thread.id }}'], '{{ g.locale }}', '#translate_thread_link{{ thread.id }}')");return false;
            });
            */
        });
    </script>

{% endblock %}

{% block app_content %}
    {% include "_thread.html" %}
            <tr><td><span id="thread_body{{ thread.id }}">{{ thread.body }}</span></td></tr>
            <tr><td><span id="translated_thread_body{{ thread.id }}"></span></td></tr>
< Additional HTML here ... >

app/templates/_thread.html

<table class="table table-bordered table-outer-border" align="center">
    <tbody>
        {% if thread.language and thread.language != g.locale %}
            <tr>
                <td>
                    <a id="translate_thread_link{{ thread.id }}" href="#">{{ _('Translate') }}</a>
                </td>
            </tr>
        {% endif %}
        <tr>
            <td><a href={{url_for('subreddit', subreddit_name=thread.subreddit.name)}}>{{ _('%(subreddit_name)s', subreddit_name=thread.subreddit.name) }}</a></td>
        </tr>
        <tr>
            {% set user_link %}
                <a href={{ url_for('user', username=thread.user.username) }}>{{ _('%(username)s', username=thread.user.username) }}</a>
            {% endset %}
            <td> {{ _('Posted by %(user)s %(date)s', user=user_link, date=moment(thread.date).fromNow()) }}</td>
        </tr>
        <tr>
            <td><b><a id="thread_title{{ thread.id }}" href="{{ url_for('view_thread', thread_title=thread.title) }}">{{ thread.title }}</a></b></td>
        </tr>

base.html

{% block scripts %}
    {{ super() }}
    {{ moment.include_moment() }}
    {{ moment.lang(g.locale) }}

    <script type="text/javascript">
        function translate(targetElemIdList, destLang, translateLinkElemId) {

            // Create list of text to translate
            var sourceElemTextList = targetElemIdList.map(function(targetElemId) {
                return $(targetElemId).text();
            });

            // Maintain list of original source elements to return in case translation fails
            var sourceElemList = targetElemIdList.map(function(targetElemId) {
                return $(targetElemId);
            });

            $(translateLinkElemId).html('<img src="{{ url_for('static', filename='loading.gif') }}">');
            targetElemIdList.forEach(function(targetElemId) {
                $(targetElemId).html('<img src="{{ url_for('static', filename='loading.gif') }}">');
            });

            $.post('/translate', {
                text: sourceElemTextList,
                dest_language: destLang
            }).done(function(response) {
                targetElemIdList.forEach(function(targetElemId, elemIndex) {
                    $(targetElemId).replaceWith(sourceElemList(elemIndex));
                    $(targetElemId).text(sourceElemTextList(response(elemIndex)));
                });
                $(translateLinkElemId).replaceWith("<p>{{ _('Text was translated from English to your preferred language.') }}</p>");
            }).fail(function() {
                targetElemIdList.forEach(function(targetElemId, elemIndex) {
                    $(targetElemId).replaceWith(sourceElemList(elemIndex));
                });
                $(translateLinkElemId).replaceWith("<p>{{ _('Error: Could not translate the selected text.') }}</p>");
            });
        }
< Additional Javascript here ... >

我希望當我導航到線程頁面時，單擊“翻譯”鏈接將觸發我的Javascript translate()函數，而不是像當前一樣使用#鏈接將我重定向到當前頁面的頂部。

Answer 1

首先，因為會有很多這樣的鏈接。 您可以使用類而不是ID，然后使用自定義屬性來保存數據。

<tr>
   <td>
     <a class="translate-thread-link" href="#" data-language="English">{{ _('Translate') }}</a>
   </td>
</tr>

然后為您的JavaScript。 使用jquery，您可以獲取自定義屬性的值，並在鏈接的onclick事件期間執行代碼。 使用preventDefault阻止鏈接的默認功能。

$(document).ready(function() {
   $(".translate-thread-link").click(function(e) {
     e.preventDefault();
     var language = $(this).attr('data-language');
     alert(language);
     // execute you code here or call a function that you need.
   })
})