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の値を取得するにはどうすればよいですか。

Like .. document.write（this）は[objectHTMLDivElement]を返します。

divでdocument.writeをクリックすると、「test」を返すようにします。

2番目のjquery（ "on"）関数にtoAddが存在しないため、document.write（toAdd）を実行できません。ありがとう。

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 に答える