当前位置： 文江博客话题详情

如果仅单击一个按钮，如何避免更改所有按钮上的颜色？ JavaScript

发布于 2025-02-04 11:52:59 字数 7263 浏览 5 评论 0原文 

var cardContent = `[{
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  }
]
`


const journalObj = JSON.parse(cardContent);
var cardContainer = document.getElementById("card-space");
// svgs

const trashSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
         <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
       </svg>`;
const checkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
         <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
         <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
       </svg>`;

const printCards = () => {
  cardContainer.innerHTML = "";
  journalObj.forEach((card) => {
    cardContainer.innerHTML += `
    <div class="card">
        <div class="card-header">
          <div class="btn bg-info text-start">task</div>
        </div>
        <img src="${card.image}" class="card-img-top img-fluid" alt="...">
        <div class="card-body">
          <div class="card-title text-center h5">${card.taskName}</div><br>
          <div class="card-text text-center">${card.description}</div>
          <hr>
          <div class="card-text"> Importance: <button type="button" data-sortable=“true" class="btn btn-success prio-btn importance" value="${card.importance}"><span class="priority-count">${card.importance}</span></button></div>
          <div class="card-text fst-italic">Deadline</div>
        </div>
        <div class="card-footer bg-transparent text-end">
          <button type="button" class="bg-danger">${trashSvg} Delete</button>
          <button type="button" class="bg-success">${checkSvg} Done</button>
          </div>
    </div> 
    `;
  });
};
printCards();

const increasePriority = () => {
  // assign querySelector All to variable
  const priorityIncrement = document.querySelectorAll(".prio-btn");
  // loop every instance of ".prio-btn"
  priorityIncrement.forEach((button, i) => {
    // assign to every instance an eventlistener
    button.addEventListener("click", () => {
      // on click increment the calue of importance
      journalObj[i].importance++;
      //assing Selector to variable
      const buttonValue = button.querySelector(".priority-count");
      //write the value into the inner value of the cards button
      buttonValue.innerHTML = journalObj[i].importance;
      button.addEventListener("click", () => {
        // abfrage auf werte
        //assign prio-btn class to singe selector in variable
        const buttonColor = document.querySelector(".prio-btn");
        if (journalObj[i].importance < 2) {
          buttonColor.setAttribute("class", "bg-success");
        } else if (
          journalObj[i].importance > 1 &&
          journalObj[i].importance < 4
        ) {
          buttonColor.setAttribute("class", "bg-warning");
        } else if (
          journalObj[i].importance > 4 &&
          journalObj[i].importance < 6
        ) {
          buttonColor.setAttribute("class", "bg-danger");
        }
      });
    });
  });
};
increasePriority();
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="container main-content" id="main-content">
  <div class="deckbox">
    <div class="row">
      <!-- row for title of row -->
      <div class="col text-start my-3  fw-bold fs-3 ">Weekly Tasks</div>
      <!-- not yet implemented= line through -->
      <div class="col text-end my-3 fw-normal">Sort by priority:<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" type="button" class="bi bi-sort-up-alt sort" viewBox="0 0 16 16">
                        <path
                            d="M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z" />
                    </svg>
      </div>

      <!-- start of row for cards -->
      <div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3 g-0" id="card-space">

      </div>
    </div>
  </div>
</div>
</div>

单击按钮时，内部的号码应上升。 当达到某些值时，按钮的颜色应更改。

当前，数字在按钮的每个单独实例中都上升，但是当仅按下一个按钮时，颜色在每个按钮上都会更改。

就像是

按下按钮1（第一张卡上的按钮）2次，它变黄。第三次按下，所有其他按钮将其颜色更改为黄色。通过4个点击，按钮4到7更改为红色，而按钮1至3保持黄色，按钮8和9保持绿色。

都显示了适量的点击量

所有这些都显示了适当

按一个按钮，超过1个，它是黄色的，超过4个是红色，其他按钮不会更改。数字仅在单击的按钮中更改

我只能使用JavaScript，Bootstrap-5，CSS和HTML ATM。

编辑我的标题完全混乱：（

原文 

var cardContent = `[{
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  },
  {
    "taskName": "Test Head",
    "image": "./images/test.jpg",
    "description": "Test description",
    "importance": 0

  }
]
`


const journalObj = JSON.parse(cardContent);
var cardContainer = document.getElementById("card-space");
// svgs

const trashSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
         <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
       </svg>`;
const checkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
         <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
         <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
       </svg>`;

const printCards = () => {
  cardContainer.innerHTML = "";
  journalObj.forEach((card) => {
    cardContainer.innerHTML += `
    <div class="card">
        <div class="card-header">
          <div class="btn bg-info text-start">task</div>
        </div>
        <img src="${card.image}" class="card-img-top img-fluid" alt="...">
        <div class="card-body">
          <div class="card-title text-center h5">${card.taskName}</div><br>
          <div class="card-text text-center">${card.description}</div>
          <hr>
          <div class="card-text"> Importance: <button type="button" data-sortable=“true" class="btn btn-success prio-btn importance" value="${card.importance}"><span class="priority-count">${card.importance}</span></button></div>
          <div class="card-text fst-italic">Deadline</div>
        </div>
        <div class="card-footer bg-transparent text-end">
          <button type="button" class="bg-danger">${trashSvg} Delete</button>
          <button type="button" class="bg-success">${checkSvg} Done</button>
          </div>
    </div> 
    `;
  });
};
printCards();

const increasePriority = () => {
  // assign querySelector All to variable
  const priorityIncrement = document.querySelectorAll(".prio-btn");
  // loop every instance of ".prio-btn"
  priorityIncrement.forEach((button, i) => {
    // assign to every instance an eventlistener
    button.addEventListener("click", () => {
      // on click increment the calue of importance
      journalObj[i].importance++;
      //assing Selector to variable
      const buttonValue = button.querySelector(".priority-count");
      //write the value into the inner value of the cards button
      buttonValue.innerHTML = journalObj[i].importance;
      button.addEventListener("click", () => {
        // abfrage auf werte
        //assign prio-btn class to singe selector in variable
        const buttonColor = document.querySelector(".prio-btn");
        if (journalObj[i].importance < 2) {
          buttonColor.setAttribute("class", "bg-success");
        } else if (
          journalObj[i].importance > 1 &&
          journalObj[i].importance < 4
        ) {
          buttonColor.setAttribute("class", "bg-warning");
        } else if (
          journalObj[i].importance > 4 &&
          journalObj[i].importance < 6
        ) {
          buttonColor.setAttribute("class", "bg-danger");
        }
      });
    });
  });
};
increasePriority();
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="container main-content" id="main-content">
  <div class="deckbox">
    <div class="row">
      <!-- row for title of row -->
      <div class="col text-start my-3  fw-bold fs-3 ">Weekly Tasks</div>
      <!-- not yet implemented= line through -->
      <div class="col text-end my-3 fw-normal">Sort by priority:<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" type="button" class="bi bi-sort-up-alt sort" viewBox="0 0 16 16">
                        <path
                            d="M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z" />
                    </svg>
      </div>

      <!-- start of row for cards -->
      <div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3 g-0" id="card-space">

      </div>
    </div>
  </div>
</div>
</div>

When a button is clicked, the number inside it should go up.
When certain values are reached, the colour of the button should change.

Currently, the numbers go up in each separate instance of the button, but the colours change on every button when only one is pressed.

Like it is

Press button 1 (button on first card) 2 times, it goes yellow. Press it a third time, ALL other buttons change their colour to yellow. Pass 4 clicks, buttons 4 to 7 change to red while button 1 to 3 stay yellow, button 8 and 9 stay green. All show the right amount of clicks though

How it should be

Press a button, over 1 it is yellow, over 4 it is red, the other buttons dont change. The numbers change only in the button that was clicked

I can only use JavaScript, bootstrap-5, CSS and HTML atm.

edit My title is totally messed up :(

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

回梦 2025-02-11 11:52:59

好的
尝试遇到奇怪的错误后
将“单个实例” QuerySelector按钮更改为带有索引的QuerySelectorall的按钮，并将所有按钮类元素放回其中。

var cardContent = `[{
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      }
    ]
    `


const journalObj = JSON.parse(cardContent);
var cardContainer = document.getElementById("card-space");
// svgs

const trashSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
             <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
           </svg>`;
const checkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
             <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
             <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
           </svg>`;

const printCards = () => {
  cardContainer.innerHTML = "";
  journalObj.forEach((card) => {
    cardContainer.innerHTML += `
        <div class="card">
            <div class="card-header">
              <div class="btn bg-info text-start">task</div>
            </div>
            <img src="${card.image}" class="card-img-top img-fluid" alt="...">
            <div class="card-body">
              <div class="card-title text-center h5">${card.taskName}</div><br>
              <div class="card-text text-center">${card.description}</div>
              <hr>
              <div class="card-text"> Importance: <button type="button" data-sortable=“true" class="btn btn-success prio-btn importance" value="${card.importance}"><span class="priority-count">${card.importance}</span></button></div>
              <div class="card-text fst-italic">Deadline</div>
            </div>
            <div class="card-footer bg-transparent text-end">
              <button type="button" class="bg-danger">${trashSvg} Delete</button>
              <button type="button" class="bg-success">${checkSvg} Done</button>
              </div>
        </div> 
        `;
  });
};
printCards();

const increasePriority = () => {
  // assign querySelector All to variable
  const priorityIncrement = document.querySelectorAll(".prio-btn");
  // loop every instance of ".prio-btn"
  priorityIncrement.forEach((button, i) => {
    // assign to every instance an eventlistener
    button.addEventListener("click", () => {
      // on click increment the calue of importance
      journalObj[i].importance++;
      //assing Selector to variable
      const buttonValue = button.querySelector(".priority-count");
      //write the value into the inner value of the cards button
      buttonValue.innerHTML = journalObj[i].importance;
      /*--------------------button colour change-----------------------------------------------------*/
      button.addEventListener("click", () => {
        // checking values, assiging correct colour
        if (journalObj[i].importance < 2) {
          priorityIncrement[i].setAttribute(
            "class",
            "btn btn-success prio-btn importance bg-success"
          );
        } else if (
          journalObj[i].importance > 1 &&
          journalObj[i].importance < 4
        ) {
          priorityIncrement[i].setAttribute(
            "class",
            "btn btn-warning prio-btn importance bg-warning"
          );
        } else if (
          journalObj[i].importance > 4 &&
          journalObj[i].importance < 6
        ) {
          priorityIncrement[i].setAttribute(
            "class",
            "btn btn-danger prio-btn importance bg-danger"
          );
        }
      });
      /* -----------------------------------------------------------------------*/
    });
  });
};
increasePriority();
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="container main-content" id="main-content">
  <div class="deckbox">
    <div class="row">
      <!-- row for title of row -->
      <div class="col text-start my-3  fw-bold fs-3 ">Weekly Tasks</div>
      <!-- not yet implemented= line through -->
      <div class="col text-end my-3 fw-normal">Sort by priority:<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" type="button" class="bi bi-sort-up-alt sort" viewBox="0 0 16 16">
                            <path
                                d="M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z" />
                        </svg>
      </div>

      <!-- start of row for cards -->
      <div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3 g-0" id="card-space">

      </div>
    </div>
  </div>
</div>
</div>

OK
After trying around and running into weird errors
changing the "single instance" querySelector button to the one for querySelectorAll with an index, AND putting all button class elements back in it worked.

var cardContent = `[{
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      },
      {
        "taskName": "Test Head",
        "image": "./images/test.jpg",
        "description": "Test description",
        "importance": 0

      }
    ]
    `


const journalObj = JSON.parse(cardContent);
var cardContainer = document.getElementById("card-space");
// svgs

const trashSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
             <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
           </svg>`;
const checkSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle" viewBox="0 0 16 16">
             <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
             <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
           </svg>`;

const printCards = () => {
  cardContainer.innerHTML = "";
  journalObj.forEach((card) => {
    cardContainer.innerHTML += `
        <div class="card">
            <div class="card-header">
              <div class="btn bg-info text-start">task</div>
            </div>
            <img src="${card.image}" class="card-img-top img-fluid" alt="...">
            <div class="card-body">
              <div class="card-title text-center h5">${card.taskName}</div><br>
              <div class="card-text text-center">${card.description}</div>
              <hr>
              <div class="card-text"> Importance: <button type="button" data-sortable=“true" class="btn btn-success prio-btn importance" value="${card.importance}"><span class="priority-count">${card.importance}</span></button></div>
              <div class="card-text fst-italic">Deadline</div>
            </div>
            <div class="card-footer bg-transparent text-end">
              <button type="button" class="bg-danger">${trashSvg} Delete</button>
              <button type="button" class="bg-success">${checkSvg} Done</button>
              </div>
        </div> 
        `;
  });
};
printCards();

const increasePriority = () => {
  // assign querySelector All to variable
  const priorityIncrement = document.querySelectorAll(".prio-btn");
  // loop every instance of ".prio-btn"
  priorityIncrement.forEach((button, i) => {
    // assign to every instance an eventlistener
    button.addEventListener("click", () => {
      // on click increment the calue of importance
      journalObj[i].importance++;
      //assing Selector to variable
      const buttonValue = button.querySelector(".priority-count");
      //write the value into the inner value of the cards button
      buttonValue.innerHTML = journalObj[i].importance;
      /*--------------------button colour change-----------------------------------------------------*/
      button.addEventListener("click", () => {
        // checking values, assiging correct colour
        if (journalObj[i].importance < 2) {
          priorityIncrement[i].setAttribute(
            "class",
            "btn btn-success prio-btn importance bg-success"
          );
        } else if (
          journalObj[i].importance > 1 &&
          journalObj[i].importance < 4
        ) {
          priorityIncrement[i].setAttribute(
            "class",
            "btn btn-warning prio-btn importance bg-warning"
          );
        } else if (
          journalObj[i].importance > 4 &&
          journalObj[i].importance < 6
        ) {
          priorityIncrement[i].setAttribute(
            "class",
            "btn btn-danger prio-btn importance bg-danger"
          );
        }
      });
      /* -----------------------------------------------------------------------*/
    });
  });
};
increasePriority();
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="container main-content" id="main-content">
  <div class="deckbox">
    <div class="row">
      <!-- row for title of row -->
      <div class="col text-start my-3  fw-bold fs-3 ">Weekly Tasks</div>
      <!-- not yet implemented= line through -->
      <div class="col text-end my-3 fw-normal">Sort by priority:<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" type="button" class="bi bi-sort-up-alt sort" viewBox="0 0 16 16">
                            <path
                                d="M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z" />
                        </svg>
      </div>

      <!-- start of row for cards -->
      <div class="row row-cols-sm-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-3 row-cols-xxl-3 g-0" id="card-space">

      </div>
    </div>
  </div>
</div>
</div>

回复 原文
~没有更多了~

关于作者

执妄

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

佚名

文章 0 评论 0

今天

文章 0 评论 0

゛时过境迁

文章 0 评论 0

达拉崩吧

文章 0 评论 0

呆萌少年

文章 0 评论 0

孤者何惧

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文