javascript - 如何修复 jQuery 从 html 输入元素输出相同的文本？

标签 javascript jquery html css frontend

我正在用 jQuery 构建一个购物 list 应用程序。 除了最后一件事，一切都工作正常。 当用户输入文本并点击 Enter 时，它会使用输入的文本创建一个元素，但当通过点击 Enter 创建另一个元素时，它会使所有元素都具有相同的名称。

代码如下

    $(document).ready(function() {
// Global Variables //
var checkMark = '<img src="images/cross_off_green.png" alt="Cross Off" class="cross_off" id="cross_off">';
var xMark = '<img src="images/delete.png" alt="Delete" class="delete" id="delete">';
var editText = '<span></span>';
var checkOff = '<img src="images/cross_off_red.png" alt="Checked Off" class="cross_off_red" id="cross_off_red"';


// On key up of input = ENTER post the item //
function getItem() {
    $('input').keyup(function(event) {
        if (event.keyCode == 13) {
            postItem();
        };
    });
}

getItem();

// Creates Post //
function postItem() {
    var value = $('input').val();
    var work = '<div class="regular_list">'+ xMark  + editText +checkMark + checkOff + '</div>';
    $('.list_area').append(work);
    $('span').css('color', '#0073E8').text(value);
}

// Reset //
$(document).on('click', 'button', function(event) {
    event.preventDefault();
    $('.list_area').empty();
});

 // Delete Item //
 $(document).on('click',' #delete', function(event) {
    event.preventDefault();
    $(this).closest('.regular_list').fadeOut(300);
 });

 // Crossed Off //
$(document).on('click', '.cross_off', function(event) {
    event.preventDefault();
    if ($('.cross_off').is(':visible') == true ) {
        $(this).hide();
        $('.cross_off_red').css('display', 'block');
        $('span').css('text-decoration', 'line-through');
    };
});
// Still To Do //
$(document).on('click', '.cross_off_red', function(event) {
    event.preventDefault();
    if($('.cross_off_red').is(':visible') == true ) {
        $(this).hide();
        $('span').css('text-decoration', 'none');
        $('.cross_off').show();
    };
});

}); // End of document ready //

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Mobile -->
    <title>Shopping List</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
    <div class="wrapper">
      <div class="container">
        <section class="top">
            <img src="images/logo.png" alt="Logo" id="logo">
        </section>
        <section class="boxes">
            <div class="border_box_reset">
            <button>Reset List</button>
          </div>
          <div class="border_box">
            <h3>Lets Make A Grocery List</h3>
          </div>
          <div class="border_box_two">
            <h3>Enter Item and Press Enter To Add To The List</h3>
         </div>
       </section>
       <div class="input">
            <input id="add-items" type="text" name="add-items" autocomplete="off" placeholder="+ Add items">
       </div>
       <section class="list_area">
      </section>
      </div>
    </div>

</body>
</html>

CSS

    html {
  box-sizing:border-box;
  font-size: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
    font-size: 100%;
}
.wrapper {
    background-color: #00a1dd;
    width: 100%;
    height: 300px;
}
/* States the Width and Centers All Items Within */
.container {
    width: 970px;
    margin: 0 auto;
    padding: 0 85px;
    overflow: hidden;
}
#logo {
    width: 400px;
    display: block;
    margin: 0 auto;
}
.boxes {
   text-align: center;
}
section > .border_box_reset {
    width: 400px;
    height: 50px;
    display: inline-block;
    margin-top: 50px;
}
button {
    width: 200px;
    height: 50px;
    background-color: Transparent;
    background-repeat:no-repeat;
    border: 1px solid black;
    cursor:pointer;
    outline:none;
    font-size: 1rem;
    font-family: Verdana;
    font-weight: 300;
    line-height: 2;
    -webkit-transition: background-color 0.5s ease;
}
button:active {
    background-color: #00AADB;
    color: #fff;
    -webkit-transition: background-color 0.5s ease;

}
section > .border_box {
    width: 400px;
    height: 50px;
    border: 2px solid black;
    display: inline-block;
    margin-top: 10px;
}
section > .border_box_two {
    width: 400px;
    height: 50px;
    border: 2px solid black;
    display: inline-block;
    margin-top: 10px;
}
.border_box_reset> h3 {
    font-family: Verdana;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1;
}
.border_box > h3 {
    font-family: Verdana;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1;
}
.border_box_two > h3 {
    font-family: Verdana;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1;
}
input {
    margin: 0 auto;
    display: block;
    width: 400px;
    height: 50px;
    border: 2px solid black;
    margin-top: 10px;
    font-family: Verdana;
    font-size: 1rem;
    font-weight: 300;
    text-align: center;
    color: #0073E8;
}
/* List Area */
.list_area {
    width: 400px;
    text-align: center;
    margin-left: 200px;
}
div.regular_list {
    width: 400px;
    height: 50px;
    border: 2px solid black;
    display: inline-block;
    margin-top: 10px;
    border-radius: 3px;
}
img#delete {
    width: 30px;
    height: 35px;
    float: left;
    margin-top: 5px;
    cursor: pointer;
}
img#cross_off {
    width: 30px;
    height: 35px;
    float: right;
    margin-top: 5px;
    margin-right: 3px;
    cursor: pointer;
}
img#cross_off_red {
    width: 30px;
    height: 35px;
    float: right;
    margin-top: 5px;
    margin-right: 3px;
    cursor: pointer;
    display: none;
}
span {
    line-height: 3;
}

任何帮助都会很棒。 jQuery 新手。

谢谢。

最佳答案

问题出在postItem方法中，有$('span').css('color', '#0073E8').text(value);正在更改文档中所有 span 元素的颜色和文本，而不是更改新添加元素的文本

function postItem() {
    var value = $('input').val();
    var work = $('<div class="regular_list">' + xMark + editText + checkMark + checkOff + '</div>');
    work.appendTo('.list_area');
    work.find('span').css('color', '#0073E8').text(value);
}


$(document).ready(function() {
  // Global Variables //
  var checkMark = '<img src="images/cross_off_green.png" alt="Cross Off" class="cross_off" id="cross_off">';
  var xMark = '<img src="images/delete.png" alt="Delete" class="delete" id="delete">';
  var editText = '<span></span>';
  var checkOff = '<img src="images/cross_off_red.png" alt="Checked Off" class="cross_off_red" id="cross_off_red"';


  // On key up of input = ENTER post the item //
  function getItem() {
    $('input').keyup(function(event) {
      if (event.keyCode == 13) {
        postItem();
        this.value = '';//clear the input
      };
    });
  }

  getItem();

  // Creates Post //
  function postItem() {
    var value = $('input').val();
    var work = $('<div class="regular_list">' + xMark + editText + checkMark + checkOff + '</div>');
    work.appendTo('.list_area');
    work.find('span').css('color', '#0073E8').text(value);
  }

  // Reset //
  $(document).on('click', 'button', function(event) {
    event.preventDefault();
    $('.list_area').empty();
  });

  // Delete Item //
  $(document).on('click', ' #delete', function(event) {
    event.preventDefault();
    $(this).closest('.regular_list').fadeOut(300);
  });

  // Crossed Off //
  $(document).on('click', '.cross_off', function(event) {
    event.preventDefault();
    if ($('.cross_off').is(':visible') == true) {
      $(this).hide();
      $('.cross_off_red').css('display', 'block');
      $('span').css('text-decoration', 'line-through');
    };
  });
  // Still To Do //
  $(document).on('click', '.cross_off_red', function(event) {
    event.preventDefault();
    if ($('.cross_off_red').is(':visible') == true) {
      $(this).hide();
      $('span').css('text-decoration', 'none');
      $('.cross_off').show();
    };
  });

}); // End of document ready //
html {
  box-sizing: border-box;
  font-size: 100%;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body {
  font-size: 100%;
}
.wrapper {
  background-color: #00a1dd;
  width: 100%;
  height: 300px;
}
/* States the Width and Centers All Items Within */

.container {
  width: 970px;
  margin: 0 auto;
  padding: 0 85px;
  overflow: hidden;
}
#logo {
  width: 400px;
  display: block;
  margin: 0 auto;
}
.boxes {
  text-align: center;
}
section > .border_box_reset {
  width: 400px;
  height: 50px;
  display: inline-block;
  margin-top: 50px;
}
button {
  width: 200px;
  height: 50px;
  background-color: Transparent;
  background-repeat: no-repeat;
  border: 1px solid black;
  cursor: pointer;
  outline: none;
  font-size: 1rem;
  font-family: Verdana;
  font-weight: 300;
  line-height: 2;
  -webkit-transition: background-color 0.5s ease;
}
button:active {
  background-color: #00AADB;
  color: #fff;
  -webkit-transition: background-color 0.5s ease;
}
section > .border_box {
  width: 400px;
  height: 50px;
  border: 2px solid black;
  display: inline-block;
  margin-top: 10px;
}
section > .border_box_two {
  width: 400px;
  height: 50px;
  border: 2px solid black;
  display: inline-block;
  margin-top: 10px;
}
.border_box_reset> h3 {
  font-family: Verdana;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1;
}
.border_box > h3 {
  font-family: Verdana;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1;
}
.border_box_two > h3 {
  font-family: Verdana;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1;
}
input {
  margin: 0 auto;
  display: block;
  width: 400px;
  height: 50px;
  border: 2px solid black;
  margin-top: 10px;
  font-family: Verdana;
  font-size: 1rem;
  font-weight: 300;
  text-align: center;
  color: #0073E8;
}
/* List Area */

.list_area {
  width: 400px;
  text-align: center;
  margin-left: 200px;
}
div.regular_list {
  width: 400px;
  height: 50px;
  border: 2px solid black;
  display: inline-block;
  margin-top: 10px;
  border-radius: 3px;
}
img#delete {
  width: 30px;
  height: 35px;
  float: left;
  margin-top: 5px;
  cursor: pointer;
}
img#cross_off {
  width: 30px;
  height: 35px;
  float: right;
  margin-top: 5px;
  margin-right: 3px;
  cursor: pointer;
}
img#cross_off_red {
  width: 30px;
  height: 35px;
  float: right;
  margin-top: 5px;
  margin-right: 3px;
  cursor: pointer;
  display: none;
}
span {
  line-height: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <section class="top">
      <img src="images/logo.png" alt="Logo" id="logo">
    </section>
    <section class="boxes">
      <div class="border_box_reset">
        <button>Reset List</button>
      </div>
      <div class="border_box">
        <h3>Lets Make A Grocery List</h3>

      </div>
      <div class="border_box_two">
        <h3>Enter Item and Press Enter To Add To The List</h3>

      </div>
    </section>
    <div class="input">
      <input id="add-items" type="text" name="add-items" autocomplete="off" placeholder="+ Add items">
    </div>
    <section class="list_area"></section>
  </div>
</div>

关于javascript - 如何修复 jQuery 从 html 输入元素输出相同的文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33029218/

上一篇：html - 如何根据浏览器尺寸缩放填充

下一篇：css - htaccess 需要本地中断背景图像

相关文章：

javascript - 使用 PHP 检测用户的 Web 浏览器并要求使用以下命令打开它

javascript - 当输入字段类型为 =“file” 时，如何将 Bootstrap Tool 提示添加到输入字段

html - 按钮内的IE11触发标签

javascript - 迭代使用时，JQuery on Change 事件不会触发

javascript - 如何将谷歌地图中的坐标放入输入字段？

javascript - jquery 新手，想知道为什么 .hide() 不起作用

javascript - 如何根据ng-repeat中的数据类型更改样式

javascript - Reactjs 将状态作为 props 传递给子进程

javascript - 验证动态附加的文本框字段-jQuery

Javascript Fade 产生意想不到的结果

©2024 IT工具网  联系我们