(我是法国人,我会试着用英语解释,但如果你听不懂,对不起). 我曾在MDN上寻找过,并试图在这里找到答案,但我想我没有使用好的关键字.

所以,我正在学习JS,我有一个练习要做我的第一堂课(\o/).但我在第三步受阻了.

我需要用这个类的另一个方法(addToDOM())在我的类中添加一个方法(ChangeStatut)和一个addEventListener.我不知道该怎么说才好.

在第二种方法中,我需要使用"This"吗?但如何做到呢?

这个按钮"点击"需要更改我的博尔值"完成".

class Task {
    title;
    priority;
    done=false;

    constructor(title,priority){
        this.title=title;
        this.priority=priority;
    }

    addToDOM(){
    const tasklist = document.getElementById("tasks");
    const newTask = document.createElement("li");
    newTask.classList.add("task-item");

    const taskTitle = document.createElement("span");
    taskTitle.classList.add("task-title");
    taskTitle.textContent = `${this.title}`;

    const taskPriority = document.createElement("span");
    taskPriority.classList.add("task-priority");
    taskPriority.textContent = `${this.priority}`;
    taskPriority.classList.add(`task-priority--${this.priority}`);

    const taskButton = document.createElement("button");
    taskButton.classList.add("task-action");
    taskButton.textContent = "Changer le statut";

    tasklist.prepend(newTask);
    newTask.append(taskTitle,taskPriority,taskButton);

    }

    changeStatut(){

         let statut = this.done;
             statut = !statut;
             return statut;
        }

    }   

const task2 = new Task("Tailler la haie",3);
task2.addToDOM();

我try 指向同一个DOM ID.

推荐答案

我想你是在找这样的东西吧?

class Task
  {
  _tasklist = document.getElementById('tasks')
    ;
  constructor(title, priority) 
    {
    this.title    = title;
    this.priority = priority;
    this.done     = false;
    }
  addToDOM()
    {
    const
      newTask      = this._tasklist.appendChild( document.createElement('li') )
    , taskTitle    = newTask.appendChild( document.createElement('span'))
    , taskPriority = newTask.appendChild( document.createElement('span'))
    , taskButton   = newTask.appendChild( document.createElement('button'))
      ;
    newTask     .className = 'task-item';
    taskTitle   .className = 'task-title';
    taskPriority.className = `task-priority task-priority--${this.priority}`;
    taskButton  .className = 'task-action';    
    
    taskTitle   .textContent = this.title;
    taskPriority.textContent = this.priority;
    taskButton  .textContent = 'Changer le statut';

    taskButton.addEventListener('click', ()=>
      {
      this.done = !this.done;
      console.log( 'this.done :' , this.done )
      return this.done;
      });
  } }
  
const task2 = new Task('Tailler la haie', 3);
task2.addToDOM();

以下是百人S的 comments :

使用伪私有_tasklist而不是可用的真正私有#tasklist的原因是什么?

我意识到,我错过了语言的这种良好演变. 因此,这里有一个解决办法:

class Task
  {
  static #tasklist = document.getElementById('tasks')
    ;
  constructor(title, priority) 
    {
    let taskItem = `
      <li class="task-item">
        <span class="task-title">${title}</span>
        <span class="task-priority task-priority--${priority}">${priority}</span>
        <span>...</span>
        <button class="task-action">Changer le statut</button>
      </li>`;
    let 
      HTMLfrag = new Range().createContextualFragment(taskItem)
    , doneBtn  = HTMLfrag.querySelector('button.task-action')
      ;
    this.done       = false;
    this.statut_elm = HTMLfrag.querySelector('span:nth-of-type(3)');

    Task.#tasklist.appendChild(HTMLfrag);

    doneBtn.addEventListener('click', ()=>
      {
      this.done                   = !this.done;
      this.statut_elm.textContent = this.done ? 'done' : '...';
      });
  } }
  
/*---------------------------------------------------------*/
const
  task2 = new Task('Tailler la haie', 3)
, taskZ = new Task('éplucher les carottes', 15)
  ;
#tasks { list-style-type : none; padding: 0; }
#tasks li { width  : 30em; height : 1.8em; margin : .2em 0; }
#tasks li span { display : inline-block; padding : 0.4em .5em 0 .5em; }
#tasks li span:first-of-type  { width: 12em; } 
#tasks li span:nth-of-type(2) { width: 2em;  text-align: right; } 
#tasks li button {  float: right; }
<ul id="tasks"></ul>

Javascript相关问答推荐

在JS中获取名字和姓氏的首字母

为什么JavaScript双边字符串文字插值不是二次的?

Next.js Next/Image图像隐含性有任何类型-如何修复?

如何获取转换字节的所有8位?

Redux工具包查询(RTKQ)端点无效并重新验证多次触发

警告!合同执行期间遇到错误[执行已恢复](Base Layer 2)

点击按钮一次有文本出现和褪色,而不是点击两次?(html,CSS,JavaScript)

在拖放时阻止文件打开

Html文件和客户端存储的相关问题,有没有可能?

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存?

如何在FastAPI中为通过file:/URL加载的本地HTML文件启用CORS?

如何确保预订系统跨不同时区的日期时间处理一致?

<;img>;标记无法呈现图像

将基元传递给THEN处理程序

背景动画让网站摇摇欲坠

JWT Cookie安全性

在HTML5画布上下文中使用putImageData时,重载解析失败

计算对象数组中属性的滚动增量

如何在Reaction中设置缺省值, Select 下拉列表,动态追加剩余值?

Firefox的绝对定位没有达到预期效果