如何獲得「this」的價值？

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 class項目中點擊它時，從列表中刪除輸入。

我該怎麼做才能返回「this」的價值？

例如，如果我將「測試」一詞添加到列表中，並單擊它將其刪除....如何從「this」中獲取測試的值？

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

我想要document.write返回「測試」，如果我在div中點擊它。

我不能做document.write（toAdd），因爲toAdd在第二個jquery（「on」）函數中不存在。謝謝。

來源

2013-02-18 Kamui

$(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。

來源

2013-02-18 04:14:40 hjpotter92

非常感謝！只是我在找:) :) – Kamui 2013-02-18 04:19:54

使用.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-18 04:12:38

謝謝！ .innerHTML和.text（）都起作用了！ – Kamui 2013-02-18 04:20:58

@Kamui'.innerHTML'獨立於jQuery，僅供將來參考。 – 2013-02-18 21:48:36

您可以通過$(this).text()檢索點擊項目中的文字。因此，在刪除項目之前，您可以執行類似document.write($(this).text())的操作。

來源

2013-02-18 04:17:09 jagzviruz

謝謝！我感謝您的幫助！ – Kamui 2013-02-18 04:20:26

請記住.innerHTML和.text（）之間的區別.innerHTML會返回其中的所有html，但.text（）將刪除所有標記並僅返回文本。 – jagzviruz 2013-02-18 06:42:08

如何獲得「this」的價值？

回答

相關問題