为什么我的 Javascript 代码返回对象对象？

Question

我是 jQuery 新手。

我尝试在 jQuery 中从我的 django 视图中获取/汇总一些项目。这就是我所拥有的：

$(document).ready(function()
{
    var sch = $('#sch-books');
    var gov = $('#gov-books');
    var total = sch.val() + gov.val();
    $('#total').text("Total : " + total); 

});

我的模板有这个：

<div id="sch-books" class="h6 mb-1">School copies - <b>{{ s_books.count }}</b></div>
<div id="gov-books"class="h6 mb-1">Govt copies - <b>{{ g_books.count }}</b></div>
<div id="total"></div>

显示Total :

谁能帮我把它弄好..

Answer 1

val() 返回 value 属性，如 <input type="text" value=something/> 和 html() 返回所选元素的内容 (innerHTML)。

因此，像这样修改您的代码，您就可以开始了。 （我假设 django 在{{ s_books.count }} 和{{ g_books.count }} 中返回一个数值）。

$(document).ready(function()
{
    var sch = $('#sch-books b').html(); // added b element  and calling html()
    var gov = $('#gov-books b').html(); // added b element  and calling html()
    
    var total = parseInt(sch) + parseInt(gov); // converted the string into number using parseInt()

    $('#total').text("Total : " + total); // worked

});

Answer 2

前言：我建议你在模板中处理这个问题，现在有两个答案告诉你如何处理（here 和here）。 （我不使用 Django。）请注意，在客户端代码中执行此操作会导致 <div id="total"></div> 非常短暂地出现空白，然后用数字填充。如果页面加载时该元素在视图中，则用户会看到闪烁——即使他们无法确切看到闪烁的内容（这可能会令人恼火）。在 Django 视图中避免这种情况可能会更好。

但是你的客户端代码：

div 元素没有value，它们有textContent 和innerHTML（详见this question's answers）。但是这些div 元素的内容中除了您要查找的数字之外还有很多东西。虽然您可以将数字从文本中分离出来（或仅从 div 中的 b 元素中检索它），但如果有人以看似无害的方式更改模板，这些都是脆弱的解决方案。

如果您真的想使用客户端代码处理此问题，请将您想要的值存储在 data-* 属性中的 div 元素中：

<div id="sch-books" class="h6 mb-1" data-count="{{ s_books.count }}">School copies - <b>{{ s_books.count }}</b></div>
<div id="gov-books" class="h6 mb-1" data-count="{{ g_books.count }}">Govt copies - <b>{{ g_books.count }}</b></div>
<div id="total"></div>

然后获取data-* 属性：

$(document).ready(function() {
    const sch = +$("#sch-books").attr("data-count");
    const gov = +$("#gov-books").attr("data-count");
    const total = sch + gov;
    $("#total").text(`Total : ${total}`); 
});

Answer 3

您可以尝试为此目的使用 django-mathfilter。因为用户可以禁用 javascript，并且 django-mathfilter 非常强大。

$ pip install django-mathfilters

Then add mathfilters to your INSTALLED_APPS.

然后在你的模板中你可以做这样的事情。

{% load mathfilters %}
........
{% with s_books.count as s_book and g_books.count as g_book %} 
<div id="sch-books" class="h6 mb-1">School copies - <b>{{ s_book }}</b></div>
<div id="gov-books"class="h6 mb-1">Govt copies - <b>{{ g_book }}</b></div>
<div id="total">{{ s_book|add:g_book }}</div>
{% endwith %}

更多信息请阅读https://pypi.org/project/django-mathfilters/

Answer 4

我会建议在 Django 端创建 total_value 并将其移动到模板中，而不是涉及 js 脚本。

<div class="h6 mb-1" data-count="{{ s_books.count }}">School copies - <b>{{ s_books.count }}</b></div>
<div class="h6 mb-1" data-count="{{ g_books.count }}">Govt copies - <b>{{ g_books.count }}</b></div>
<div>{total_count}</div>

我不确定您使用哪种方式来呈现模板，但应该看看这个

# views.py
from django.shortcuts import render

def render_users(request):
    g_books = {}
    s_books = {}

    context = {
        "g_books": g_books,
        "s_books": s_books,
        "total_count": g_books.count + s_books.count
    }

    return render(request, 'books.html', context)