javascript - 使用 javascript-ajax Django 在 html 中获取特定值

Question

我正在使用 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() 时，我总是得到相同的值。无论我选择列出的第一个类别还是最后一个类别都没有关系，我将始终获得相同的值。我不知道出了什么问题。

Answer 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;
});