Question

我有这段代码：

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的值？

like .. document.write（this）返回[object HTMLDivElement]。

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

我不能做document.write（toAdd），因为toAdd在第二个jquery（“on”）函数中不存在。感谢。

Answer 1

$(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();
    });
});

小提琴链接is here。

Answer 2

使用.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();
  });
});

Answer 3

您可以$(this).text()检索所点击项目中的文字。因此，在删除项目之前，您可以执行document.write($(this).text())之类的操作。

如何获得“这个”的价值？

3 个答案: