使用 javascript-ajax Django 在 <a> html 中获取特定值答案

【问题标题】：Get an specific value in <a> html with javascript-ajax Django使用 javascript-ajax Django 在 <a> html 中获取特定值
【发布时间】：2016-01-28 21:57:24
【问题描述】：

我正在使用 Django 和 Python 3。

我的 HTML 代码中有这个：

{% for category in categories() %}
    <li class="c-menu__item fs-xsmall">
        <a href="#" id="next-category">
            {{ category}}
        </a>
    </li>
    <input type="hidden" value="{{ category.code }}" id="category-id">
{% endfor %}
<div class="col-xs-4" id="sub_categories">
</div>

列出了几个类别。

我的脚本中有这个：

$( document ).on( 'click', '#next-category', function(e){
    e.preventDefault();
    $.ajax({
        url : 'product_category/addAjax',
        type : 'POST',
        data : {
            category: $( '#category-id').val(),
        },
    })
    .fail(function( jqXHR, textStatus, errorThrown ){
        console.log('FAIL');
    })
    .done(function(data){
        console.log('DONE');
        $('#sub_categories').prop('innerHTML',data["sub_categories"]);

    });
    return false;
});

当我打印：$('#category-id').val() 时，我总是得到相同的值。无论我选择列出的第一个类别还是最后一个类别，我都会得到相同的值。我不知道出了什么问题。

【问题讨论】：

第二个怎么选？
你打印了很多<input ... id="category-id">，但所有的都有相同的id
有点困惑您要完成的工作.. 但是如果您尝试将 category.code 与链接相关联.. 这样当点击链接时您会获得该类别的代码，您需要将隐藏的输入放在链接标签中，以便找到正确的输入。或者，只使用数据属性，例如：<li class="c-menu__item fs-xsmall" data-code="{{ category.code }}"> 并忘记输入标签。
那你就可以$( document ).on( 'click', '#next-category', function(e){ e.preventDefault(); alert($(this).attr("data-code")); });
另外{% for category in categories() %} 不知道怎么不会导致异常，当你不应该有括号时。

标签： javascript python html ajax django

【解决方案1】：

Gocht 评论是正确答案。 既然你想遍历标签，它们应该有不同的 id ！！！

简单的解决方法是使用一个类并评估正确的 id：

{% for category in categories() %}
    <li class="c-menu__item fs-xsmall">
        <a href="#" class="next-category" value="{{ forloop.counter }}" >
            {{ category}}
        </a>
    </li>
    <input type="hidden" value="{{ category.code }}" id="category-id-{{ forloop.counter }}">
{% endfor %}
<div class="col-xs-4" id="sub_categories">
</div>

脚本：

$( document ).on( 'click', '.next-category', function(e){
    e.preventDefault();
    var id = $(this).attr("value");
    var input_id = "#category-id-" + id;

    $.ajax({
        url : 'product_category/addAjax',
        type : 'POST',
        data : {
            category: $(input_id).val(),
        },
    })
    .fail(function( jqXHR, textStatus, errorThrown ){
        console.log('FAIL');
    })
    .done(function(data){
        console.log('DONE');
        $('#sub_categories').prop('innerHTML',data["sub_categories"]);

    });
    return false;
});

【讨论】：

谢谢！我尝试在 HTML 中更改“名称”的“值”并修复它工作的 .js
伟大的 Marisela，考虑将答案标记为正确，这很有帮助！ ;-)