动态生成id，并分配给标签

时间：2016-04-22 17:49:16

标签： javascript jquery html css

＆＃13;
＆＃13; 
$(document).ready(function() {
  $("body").tooltip({
    selector: '[data-toggle=tooltip]'
  });
});

var unique_id=0;
$('#update').on('click', function() {
  if ($('#myText').val().length == 0) {
    alert('Are you Kidding ? ;)')
    return
  }
  unique_id++;
  $('#result').append('<li>' + '<input id="checkboxFourInput" type="checkbox" class="todo-item" /> <label for="checkboxFourInput"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
  // $('#myText').val("").attr("disabled", "disabled");

  // update value
  $('#myText').val('').change();
});

$('#myText').on("focus click", function() {
  $('#update').removeClass("gray_text");
  $('#update').addClass("show");
});
$('#edit').on('mouseup', function() {
  console.log($('#myText'));
  $('#myText').prop("disabled", false).focus().select();
});

$('#myText').on("focus click", function() {
  $('#update').removeClass("gray_text");
  $('#update').addClass("show");
})

$('.hide').on("click", function() {
  $('.hide').removeClass("show");
});

$('#result ').on('click', 'li .glyphicon-remove', function() {
  // alert('Clicked');
  $(this).closest('li').remove();
});
＆＃13; 
.editable_text{
  margin: 20px;
  /*padding: 15px;*/
  border: 1px solid #ccc;
  width: 300px;
  border-radius: 5px;
  background: white;
  display: inline-block;
  text-align: left;
}
ul#result{
  padding: 0;
  margin: 0;
  position: relative;
  top: -40px;
  border-top: 1px solid #ccc;
}
#result li {
  padding: 15px 25px;
  border-bottom: 1px solid #ccc;
  list-style: none;
  font-size: 18px;
  font-weight: 100;
  color: #555;
  letter-spacing: 1px;
  width: 100%;
}
#myText{
  margin: 0;
  padding: 20px 30px 20px 40px;
  border: transparent;
  border-bottom: 1px solid #ccc;
  position: relative;
  /*left: -16px;*/
  width: 100%;
  top: -40px;
}

.btns{
  width:100%;
  position: relative;
  padding: 20px 0;
}
.plus {
  padding: 0 20px;
  cursor: pointer;
  position: relative;
  right: 2px;
  z-index: 1;
}
.okay{
  float: right;
  position: relative;
  right: -2px;
  top: 0px;
  padding: 0 20px;
  cursor: pointer;
  z-index: 1;
}
.gray_text{
  opacity: 0.2;
  color: #222;
}
.show{
  opacity: 1;
  color: blue;
}
input[type=checkbox] {
  visibility: hidden;
}
#result label {
  cursor: pointer;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 15px;
  left: 15px;
  background: #fff;
  border: 1px solid #4AADF1;
  border-radius: 100%;
}
#result label:focus{
  background: #4AADF1;
}
#result label:after {
  opacity: 0.2;
  content: '';
  position: absolute;
  width: 12px;
  height: 5px;
  left: 5px;
  top: 7px;
  background: transparent;
  border: 2px solid white;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/**
* Create the hover event of the tick
*/
#result label:hover::after {
  opacity: 0.5;
}

/**
* Create the checkbox state for the tick
*/
#result input[type=checkbox]:checked + label:after {
  opacity: 1;
}
#result input[type=checkbox]:checked + label{
  background: #4AADF1;
}
.todo-item-del{
  text-align: right;
  float: right;
}
＆＃13; 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="box">
  <div class="editable_text">
    <div class="btns">
      <a id="edit" class="pull-left plus" data-toggle="tooltip" data-placement="bottom" title="Click to Add">
        <i class="glyphicon glyphicon-plus"></i>
      </a>

      <a id="update" class="gray_text okay" data-toggle="tooltip" data-placement="right" title="Click to Okay">
        <i class="glyphicon glyphicon-ok"></i>
      </a>
    </div>
    <input type='text'  id="myText" placeholder="Add new goals"/>
    <ul id="result"></ul>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

你好，

我正在尝试为我的管理员信息中心实施一个待办事项列表，我在这里进行了操作，在此我将li作为项目添加到我的待办事项列表中，它第一次工作正常，我得到的checkbox也正常工作，但是当我创建第二个To-Do时，它会出错，并且复选框不起作用。

这里是我尝试的代码，但是dint得到了成功

$('#result').append('<li>' + '<input "$(this).attr("id",$(this).attr("id")+"_"+(unique_id))" type="checkbox" class="todo-item" /> <label for="(unique_id)"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');

以下是小提琴link

2 个答案:

答案 0 :(得分：1)

2个问题：

  • id的复选框需要基于unique_id
  • #result label { ... top: 15px; ... }导致每个复选框固定在同一个y位置。

$(document).ready(function() {
  $("body").tooltip({
    selector: '[data-toggle=tooltip]'
  });
});

var unique_id = 0;
$('#update').on('click', function() {
  if ($('#myText').val().length == 0) {
    alert('Are you Kidding ? ;)')
    return
  }
  unique_id++;
  $('#result').append('<li>' + '<input id="checkbox'+unique_id+'Input" type="checkbox" class="todo-item" /> <label for="checkbox'+unique_id+'Input"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
  // $('#myText').val("").attr("disabled", "disabled");

  // update value
  $('#myText').val('').change();
});

$('#myText').on("focus click", function() {
  $('#update').removeClass("gray_text");
  $('#update').addClass("show");
});
$('#edit').on('mouseup', function() {
  console.log($('#myText'));
  $('#myText').prop("disabled", false).focus().select();
});

$('#myText').on("focus click", function() {
  $('#update').removeClass("gray_text");
  $('#update').addClass("show");
})

$('.hide').on("click", function() {
  $('.hide').removeClass("show");
});

$('#result ').on('click', 'li .glyphicon-remove', function() {
  // alert('Clicked');
  $(this).closest('li').remove();
});
.editable_text {
  margin: 20px;
  /*padding: 15px;*/
  border: 1px solid #ccc;
  width: 300px;
  border-radius: 5px;
  background: white;
  display: inline-block;
  text-align: left;
}
ul#result {
  padding: 0;
  margin: 0;
  position: relative;
  top: -40px;
  border-top: 1px solid #ccc;
}
#result li {
  padding: 15px 25px;
  border-bottom: 1px solid #ccc;
  list-style: none;
  font-size: 18px;
  font-weight: 100;
  color: #555;
  letter-spacing: 1px;
  width: 100%;
}
#myText {
  margin: 0;
  padding: 20px 30px 20px 40px;
  border: transparent;
  border-bottom: 1px solid #ccc;
  position: relative;
  /*left: -16px;*/
  width: 100%;
  top: -40px;
}
.btns {
  width: 100%;
  position: relative;
  padding: 20px 0;
}
.plus {
  padding: 0 20px;
  cursor: pointer;
  position: relative;
  right: 2px;
  z-index: 1;
}
.okay {
  float: right;
  position: relative;
  right: -2px;
  top: 0px;
  padding: 0 20px;
  cursor: pointer;
  z-index: 1;
}
.gray_text {
  opacity: 0.2;
  color: #222;
}
.show {
  opacity: 1;
  color: blue;
}
input[type=checkbox] {
  visibility: hidden;
}
#result label {
  cursor: pointer;
  position: absolute;
  width: 24px;
  height: 24px;
  /*top: 15px;*/
  left: 15px;
  background: #fff;
  border: 1px solid #4AADF1;
  border-radius: 100%;
}
#result label:focus {
  background: #4AADF1;
}
#result label:after {
  opacity: 0.2;
  content: '';
  position: absolute;
  width: 12px;
  height: 5px;
  left: 5px;
  top: 7px;
  background: transparent;
  border: 2px solid white;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/**
* Create the hover event of the tick
*/

#result label:hover::after {
  opacity: 0.5;
}
/**
* Create the checkbox state for the tick
*/

#result input[type=checkbox]:checked + label:after {
  opacity: 1;
}
#result input[type=checkbox]:checked + label {
  background: #4AADF1;
}
.todo-item-del {
  text-align: right;
  float: right;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="box">
  <div class="editable_text">
    <div class="btns">
      <a id="edit" class="pull-left plus" data-toggle="tooltip" data-placement="bottom" title="Click to Add">
        <i class="glyphicon glyphicon-plus"></i>
      </a>

      <a id="update" class="gray_text okay" data-toggle="tooltip" data-placement="right" title="Click to Okay">
        <i class="glyphicon glyphicon-ok"></i>
      </a>
    </div>
    <input type='text' id="myText" placeholder="Add new goals" />
    <ul id="result"></ul>
  </div>
</div>

答案 1 :(得分：1)

在JS中创建唯一ID的简单方法是使用Date对象和getTime（），它返回自1970年1月1日00:00:00 UTC以来的毫秒数。

new Date().getTime(); // 1461348496454

但是，看起来这并不是标签/复选框似乎缺失的原因。他们在那里;他们只是在同一个地方，因为他们是position: absolute。您只需将position: relative添加到li。

另外，我建议使用某种类型的客户端模板来完成此类任务。它可以更容易地发现问题并保持清洁。如果您在自己的网站上没有这么做，那么把手可能会有些过分。你可能想看看Underscore这样的简单事情。这将是一个简单快速的实施。

您只需更改一些内容即可使用下划线模板。首先在页面中包含下划线，然后为模板partial添加脚本标记： 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"/>
<script type="text/template" class="template">
    <li>
        <input id="<%- uid %>" type="checkbox" class="todo-item">
        <label for="<%- uid %>"></label><%- labelText %><i class="glyphicon glyphicon-remove todo-item-del"></i>
    </li>
</script>

更改单击处理程序以构造模板的数据对象，并使用模板创建html字符串： 

// _.template returns a function that is used to produce html string using whatever data you pass.
var todoTemplate = _.template( $( 'script.todoTemplate' ).html() );

$('#update').on('click', function() {
  var $myText, labelText, uid, templateData, html;
    $myText = $('#myText');
    labelText = $myText.val();
    if (labelText.length === 0) {
        alert('Are you Kidding ? ;)');
        return;
    }
    // create the unique id for the label
    uid = new Date().getTime();
    // create the template data object
    templateData = {
        uid: uid,
        labelText: labelText
    };
    // use your template function to produce the html string you will append
    html = todoTemplate(templateData);

    $('#result').append(html);

    // update value
    $myText.val('').change();
});

如果你想看一个有效的例子，我已经创建了一个jsfiddle来测试它： https://jsfiddle.net/n7bwymno/1/

相关问题
最新问题