1

我有这个代码：

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>To Do</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <h2>To Do</h2>
        <form name="checkListForm">
            <input type="text" name="checkListItem"/>
        </form>
        <div id="button">Add!</div>
        <br/>
        <div class="list"></div>
    </body>
</html>

Javascript/Jquery：

$(document).ready(function()
{
 $(button).click(function(){
  var toAdd = $('input[name=checkListItem]').val();
  $('.list').append('<div class="item">' + toAdd + '</div>');

 });
 $(document).on('click','.item', function(){
   $(this).remove();
  });
});

此代码获取用户的输入，当您单击按钮时将其添加到列表中，并在您单击 div 类项中的输入时从列表中删除输入。

我怎样才能让它返回“this”的值？

例如，如果我将单词“test”添加到列表中，然后单击它以将其删除....如何从“this”中获取 test 的值？

就像.. document.write(this) 返回 [object HTMLDivElement]。

如果我在 div 中单击它，我希望 document.write 返回“test”。

我不能做 document.write(toAdd) 因为 toAdd 在第二个 jquery ("on") 函数中不存在。谢谢。

4

3 回答 3

2 
$(document).ready(function () {
    $('#button').on('click', function () {
        var toAdd = $('input[name=checkListItem]').val();
        $('.list').append('<div class="item">' + toAdd + '</div>');

    });
    $(document).on('click', '.item', function () {
        alert( $(this).text() ); // You can have `.html()` here too.
        $(this).remove();
    });
});

小提琴链接在这里。

于 2013-02-18T04:14:40.517 回答
1

使用.innerHTML：

$(document).ready(function()
{
 $(button).click(function(){
  var toAdd = $('input[name=checkListItem]').val();
  $('.list').append('<div class="item">' + toAdd + '</div>');

 });
 $(document).on('click','.item', function(){
   document.write(this.innerHTML);
   $(this).remove();
  });
});
于 2013-02-18T04:12:38.207 回答
1

您可以通过 检索单击项目内的文本$(this).text()。因此，您可以document.write($(this).text())在删除项目之前执行类似的操作。

于 2013-02-18T04:17:09.270 回答