jquery 如何使用单击将列表项变为红色，并在其中添加斜线

qkf9rpyu 于 2023-05-17 发布在 jQuery

关注(0)|答案(3)|浏览(142)

我正试图使我的代码，以便当我点击一个添加的列表项，它改变颜色红色，以及添加一个斜线通过它。程序的完整代码如下

<html lang="en">
<head>
<meta charset="utf-8">
<title>Ultimate List Maker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
        
* {margin:0; padding:10px; text-align:center;}  
body {width:80%; margin:40px auto; min-width: 400px; max-width: 600px}
header {background:red}
#counters {background:lightgreen;font-weight: bold; font-size: 150%;display: flex; justify-content: space-around; flex-wrap: wrap}
button {background: #ff9999; width: 100px; }
main {background:yellow; min-height: 80px}
footer {background:lightblue}
button:hover {background: pink}
li {list-style: none; font-weight: bold; font-size: 150%}
.complete {color: red; text-decoration: line-through}

 </style>
</head>
 <body>

 <main>

 <ul id="list">
 <li></li>
 </ul>

 <button id="showForm">Add New Item</button>

 <form id="newItemForm">
   <input type="text" id="itemDescription" placeholder="Add description">
   <input type="submit" id="add" value="add">
 </form>

 </main>

 <footer><h2>Making lists since 2018</h2></footer>

 <script>

 $(document).ready(function(){
  $('#showForm').click(function(){
      var li = $('#itemDescription').val();
      $('#list').append('<li>'+li+'</li>');
   });
 });

</script>

</body> 

</html>

我已经尝试了这行代码，但是当单击该项时，它不执行任何操作

$(document).ready(function(){
 $("li").click( function() { 
 $("li").css("color", "#d49a9a");
 $(this).css("color", "#c2c0c0");
  });
});

jquery

来源：https://stackoverflow.com/questions/76245845/how-do-i-use-click-to-turn-a-list-item-red-as-well-as-have-a-slash-through-it

3条答案

按热度按时间

kr98yfug1#

<!-- @format -->

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ultimate List Maker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 10px;
        text-align: center;
      }
      body {
        width: 80%;
        margin: 40px auto;
        min-width: 400px;
        max-width: 600px;
      }
      header {
        background: red;
      }
      #counters {
        background: lightgreen;
        font-weight: bold;
        font-size: 150%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
      }
      button {
        background: #ff9999;
        width: 100px;
      }
      main {
        background: yellow;
        min-height: 80px;
      }
      footer {
        background: lightblue;
      }
      button:hover {
        background: pink;
      }
      li {
        list-style: none;
        font-weight: bold;
        font-size: 150%;
      }
      .complete {
        color: red;
        text-decoration: line-through;
      }
    </style>
  </head>
  <body>
    <main>
      <ul id="list"></ul>

      <button id="showForm">Add New Item</button>

      <form id="newItemForm">
        <input type="text" id="itemDescription" placeholder="Add description" />
        <input type="button" id="add" value="add" />
      </form>
    </main>

    <footer><h2>Making lists since 2018</h2></footer>

    <script>
      // $(document).ready(function () {
      $("#add").click(function (e) {
        e.preventDefault;
        $("#list").append(
          "<li class='li'>" + $("#itemDescription").val() + "</li>"
        );
        
        $(".li").click(function () {
          $(this).css("background", "#d49a9a");
          // $(this).css("color", "#c2c0c0");
        });
      });

      // });
    </script>
  </body>
</html>

1.首先，你必须确保防止提交表格不重新加载页面。
1.追加此"<li class='li'>" + $("#itemDescription").val() + "</li>"
1.每当您单击列表时，只有该列表元素会更改

$(this).css("background", "#d49a9a");
              // $(this).css("color", "#c2c0c0");
            });

我希望你已经找到解决办法了

赞(0）回复(0）举报 2023-05-17

gfttwv5a2#

我假设当按下<input type="submit">按钮时，所有内容都消失了，所以您需要添加另一个不必要的按钮。每当单击<form>中的<input type="submit">或<button></button>时，都会触发“提交”事件。因此，不要在<form>之外的<button>上使用“click”事件，而是使用在<form>上触发的“submit”事件。提交<form>时的默认行为是将其数据发送到服务器，如果服务器没有响应，则保留空白页面。为了避免出现空白页，请使用event.preventDefault()。
下一个问题可以通过在用户单击的任何<li>上切换".complete"类来解决。

$("#list").on("click", "li", function() {
  $(this).toggleClass("complete");
});

示例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Ultimate List Maker</title>
  <style>
     :root {
      font: 2ch/1.25 "Segoe UI";
    }
    
    main {
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      min-height: 80px;
      padding: 20px 10px;
      background: yellow;
    }
    
    input {
      font: inherit;
    }
    
    [type="submit"]:hover {
      cursor: pointer;
      background: pink
    }
    
    #list {
      margin-left: -40px;
    }
    
    li {
      list-style: none;
      font-weight: bold;
      font-size: 150%
    }
    
    li:hover {
      cursor: pointer;
    }
    
    .complete {
      color: red;
      text-decoration: line-through;
    }
  </style>
</head>

<body>
  <main>
    <form id="UI">
      <input id="desc" placeholder="Add description">
      <input type="submit" value="Add">
    </form>
    <ul id="list"></ul>
  </main>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $('#UI').on("submit", function(event) {
      event.preventDefault();
      let li = `<li>${$('#desc').val()}</li>`;
      $('#list').append(li)
    });
    $("#list").on("click", "li", function() {
      $(this).toggleClass("complete");
    });
  </script>

</body>

</html>

赞(0）回复(0）举报 2023-05-17

von4xj4u3#

// Get all list items
var listItems = document.querySelectorAll("#myList li");

// Add event listener to each list item
listItems.forEach(function(item) {
  item.addEventListener("click", function() {
    // Toggle the "clicked" class on the clicked list item
    this.classList.toggle("clicked");
  });
});

li.clicked {
  text-decoration: line-through;
  color: red;
  cursor: pointer;
}

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

赞(0）回复(0）举报 2023-05-17

我来回答

jquery 如何使用单击将列表项变为红色，并在其中添加斜线

3条答案

相关问题

热门标签

最新问答