Question

信息：我正在尝试构建一个多个待办事项列表应用。单击“创建”按钮时，会在侧面板中创建一个包含动态ID的包装类，该类包含class = item（用户i / p）和删除图标（fa.fa.trash）。此外，还有一个div块，在中间面板中为侧面板中创建的每个项目创建了class = todolistblock。这个todolistblock的父级是一个wrappertodo类，还有一个动态id（wraptd）。

预期输出点击项目类后，我在中间面板中获得一个带有输入字段（dynamicinput）的蓝色背景，以创建待办事项列表。

当前输出：我只想在当前点击的项目中不存在时附加输入标记，但遗憾的是当前代码不起作用，并且每次点击时它都会不断追加（dynamicinput）在当前项目上。

我的if语句有什么问题，它不允许附加多个输入标签？我在Stackoverflow上搜索了很多，但没有解决方案适合我。

var maxvalue=9; //to restrict the number of list items created
var count = 0; //to count the number of list items created
var listitem = '<div class="item">'; //every item i/p by user is in class item
var deleteicon = '<div class="fa fa-trash">'; //delete icon
var dynamicinput = "<input type='text' name='todoinputname' class='todoinput' placeholder='Enter To-Do..'/>";
var i = 1; //to give a unique id to each wrapper div
$(document).ready(function(){
	$('#createlistbutton').click(function(){
    var container = '<div class="wrapper" id="'+i+'">'; //each wrapper div has a different id
    var containerTodo = '<div class="wrappertodo" id="wraptd'+i+'">'; //wrapper for todolistblock has dynamic id
    var todolistblock = '<div class="todolistblock" id="todo'+i+'">'; //each todoblock has a dynamic id
    i++; //increment the counter
  	var toAdd = $('input[name=newlistitem]').val(); //i/p from user
    if(count<maxvalue) {
    	$('.categories').append(container + listitem +toAdd + '</div>' + deleteicon + '</div>' +'</div>');//dynamic adding item
        $('.middlepanel').append(containerTodo + todolistblock + '</div>' + '</div>');//adding a div block in middlepanel
        count +=1;
    } else {
      alert("Not more than 9 list can be created");
    } 
  });  
  
  
  $('.categories').on('click','.item',function(){
    var thisId = $(this).parent().attr('id'); //obtaining the id of wrapper class container
    $('.item').removeClass('item-bg-color'); //remove existing class for blue bg effect
    $('.wrappertodo').hide(); // hide all todolistblocks initially
    $(this).addClass('item-bg-color'); //add blue bg only for corresponding clicked item
    $('#wraptd'+thisId).addClass('active');//add blue bg only for correspnding todolistblock
    $('#wraptd'+thisId).fadeIn('slow');
    if(!$('#todo'+thisId).hasClass('todoinput')) //to check if current todolistblock already has dynamicinput field
     {
        $('#todo'+thisId).append(dynamicinput); //if not present append the input field(dynamicinput)
     }
    
  });
 
  
    $('main').on('click',".fa.fa-trash", function(){
    var thisId = $(this).parent().attr('id');
    $('#'+thisId).remove();
    $('#wraptd'+thisId).remove();
    count -= 1;   
  });

});

*{  margin:0;
	padding:0;
	}

body{
  display: flex;
  flex-direction:column;
  font-family: "Times New Roman","Open Sans",sans-serif;
  font-size: 16px;
 /**background: linear-gradient(45deg, #f06, yellow);**/ 
  background-color: #b9d2d4;
  background-image: url("https://www.transparenttextures.com/patterns/45-degree-fabric-dark.png");
  width:100%;
}

h3{
  color:#f0f8ff;
  margin: 18 0 0 10;
  display: inline-block;
}

.nav-bar{
  height: 10%;
  background-color:#303030;
}
ul{
  list-style-type:none;
  display: inline-block;
  margin:0;
  margin-right:15;
  padding:0;
  float:right;
  overflow:hidden;
}

li{
  float:left;
  margin-top:5;
  
}

li a{
  display:block;
  text-decoration:None;
  padding: 8px;
  color:#f0f8ff;
   padding: 14px 16px;
  text-align:center;
}

li a:hover{
  text-decoration:underline;
  font-weight:bold;
}

footer p{
   margin-top:25px;
   }

footer{
   position:fixed;
   left:0px;
   bottom:0px;
   height:10%;
   width:100%;
   color:#f0f8ff;
   background:#303030;}
   

   
.sidepanel{
   width:25%;
   float:left;
   text-align:center;
   height:80%;
   background-color:white;
  }

.createinputlist{
  position:relative;
  display:inline-block;
  margin-top:1em;
  margin-bottom: 1em;
   
}

#createlistbutton{
    font-weight:bold;
    color:#ffffff;
    background-color:#303030;
    display:inline-block;
    cursor:pointer;
	}

input[type=text]{
  width:60%;
  display:inline-block;
}

.wrapper{
  text-align:center;
  
}

.wrappertodo{
  text-align:center;
  position:absolute;
  height:80%;
  width:50%;
}

.item{
  border: 1px solid #303030;
  background-color:#f0f8ff;
  border-radius:10px;
  margin-bottom:1em;
  display:inline-block;
  width:90%;
  cursor:pointer;
}

.item:hover{
  text-decoration:underline;
}

.item-bg-color{
  background-color:lightskyBlue;
  font-weight:bold;
}
.fa.fa-trash{
  display:inline-block;
  cursor:pointer;
}

.categories{
  max-height:80%;
  position:inherit;
}

.chatpanel{
   width:25%;
   float:right;
   text-align:center;
   height:80%;
   background-color:white;
  }

#tempmsg{
  margin-top:70%;
  
}
  
.middlepanel{
  display:inline-block;
  height:80%;
  width:50%;
}

.todolistblock{

}

.active{
  background-color:lightskyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<head>
  <title>Python Flask App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="src-animation.js"></script>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

  <body>
  <header>
  <div class="nav-bar">
    <h3>PYTHON FLASK APP</h3>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Sign in</a></li>
      <li><a href="#">Sign up</a></li>
    </ul>
  </div>
  </header>
  
    <main>
  <div class="sidepanel">
    <div class="createinputlist">
  		<input type="text" name="newlistitem" placeholder="Enter a List Name"/>
  	    <button id="createlistbutton">Create List</button>
    </div>
    <br/>
    <div class="categories">
  	</div>
  </div>
  
  <div class="middlepanel">
  </div>
    
  <div class="chatpanel">
    <p id="tempmsg">Chat Panel<br/>Coming soon</p>
  </div>
  </main>
    
  <footer>
    <p>COPYRIGHT &copy 2017 PowerSoft</p>
  </footer>
  </body>

</html>

Answer 1

尝试更改项目点击功能

var Fruits : ["apple","banana","apple", "orange","banana","kiwi","orange"];

仅当div id块中不存在时才添加输入标记

1 个答案: