使用 jquery 访问设置为 attr 的 Mongoose 模式键（布尔值），但它返回未定义

Posted 2023-03-08

【中文标题】使用 jquery 访问设置为 attr 的 Mongoose 模式键（布尔值），但它返回未定义

【英文标题】：Using jquery to access Mongoose schema key (Boolean) which is set to an attr, but it returns undefined

【发布时间】：2019-08-09 06:35:32

【问题描述】：

我正在使用 node/express 并在渲染下面的 .pug 文件时，我向它发送变量“任务”下的 Mongoose 对象集合。在具有“任务链接”类的锚标记中，我可以将 id 属性设置为 mongoose _id，并且我还尝试创建一个名为“已完成”的属性并为其分配“已完成”键的值，这是我的猫鼬模式中的一个布尔对象。但是，当我使用 jquery 访问“完成”属性时，它显示为未定义。我不确定为什么会这样，因为我可以很好地访问 id。任何帮助将不胜感激。

JQUERY:

$(function()
  $('a.task-link').hover(function()
    if($(this).attr('completed'))
      let id = $(this).attr('id');
      $(this).append("<a href='/profile/delete/"+ id + "'>  Remove<a>");
    
    ,
    function () 
      if($(this).attr('completed'))
        $(this).find("a").remove();
      
    );
);

Pug:

extends layout

block content
  div#main
    h1=title
    div
      ul
        each task in tasks 
          li.task-item 
            a.task-link(id=task._id, completed=task.Completed, href='/profile/switch/'+task._id, method='get') #task.Description
        else 
          li You don't have any tasks!
      
      form#add(action='/profile/add', method='post')
        input#task-text(type='text', name='task_text')
        input#add-btn(type='submit', value='Add Task')
        br
      a#logout(href='/logout', method='get') Logout

【问题讨论】：

completed 不是锚标记的有效属性。也许尝试使用 data-* 属性。类似 data-completed=... 然后你可以通过 $(this).data('completed') 访问它。需要注意的是，方法在这里也不是受支持的属性。

另一个问题是您将字符串检查为布尔值。该属性将返回字符串“true”或“false”。如果你这样做 if(variable)，你只是反对 null 或 undefined。只要它被定义，它就会返回true。例如var f = "假"; if(f) //返回真

【参考方案1】：

您应该对不受支持的属性使用 data-* 属性。

此外，在检查字符串是否为布尔值时，您需要将其与值进行比较。 如果您只检查 if(stringval)，那么您将与 null 或 undefined 进行比较。如果已定义，它将返回 true。

JQUERY:

$(function()
  $('a.task-link').hover(function()
    if($(this).data('completed') == true)
      let id = $(this).attr('id');
      $(this).append("<a href='/profile/delete/"+ id + "'>  Remove<a>");
    
    ,
    function () 
      if($(this).data('completed') == true)
        $(this).find("a").remove();
      
    );
);

Pug:

extends layout

block content
  div#main
    h1=title
    div
      ul
        each task in tasks 
          li.task-item 
            a.task-link(id=task._id, data-completed=task.Completed, href='/profile/switch/'+task._id, data-method='get') #task.Description
        else 
          li You don't have any tasks!
      
      form#add(action='/profile/add', method='post')
        input#task-text(type='text', name='task_text')
        input#add-btn(type='submit', value='Add Task')
        br
      a#logout(href='/logout', method='get') Logout

【讨论】：

感谢您的帮助。我试图创建自定义属性。我已经能够在不添加数据的情况下很好地访问它们。添加 'data-' 作为前缀是推荐的约定吗？

我刚刚尝试过：console.log($(this).attr('completed'))，但它仍在打印“未定义”。作为测试，我在 pug 文件中将“完成”设置为“任务”（整个 mongoose 对象），然后当我将“完成”记录到控制台时，打印了一个代表整个对象的字符串。该对象包括我要访问的布尔值。不知道发生了什么。

使用 data-* 符合 html 规范。它仍然可以工作，因为 html 非常宽容，但您应该遵循规范。至于它仍然显示为未定义，请查看整个对象输出并验证您的属性是否正确。

【参考方案2】：

我发现了我的问题。 task.Completed 返回一个布尔对象，但是，我不知道关于将属性设置为布尔值的 HTML5 规则：

https://www.w3.org/TR/html5/infrastructure.html#sec-boolean-attributes

为了修复它，我只是将布尔值转换为 pug 中的字符串并将其设置为我的属性：

-var toggle = task.Completed ? 'true' : 'false'