JavaScript - 點擊列表項目時帶有文本的彈出式窗口

我試圖找出下面的腳本缺少的內容。我的目標是有一個有序的列表（每個任務的要求），其中一個彈出窗口與文本出現時，任何列表項被點擊。每個列表項目都會導致不同的文本。JavaScript - 點擊列表項目時帶有文本的彈出式窗口

我知道可能有更有效的方法來做到這一點，這是我的理解範圍，因此我試圖在下面執行下面的[非工作]解決方法。

例如：當用戶點擊「One」列表項時，會出現一個彈出窗口，其中的文本顯示爲「Item 1」，但我得到「undefined」作爲結果。有小費嗎？

我測試的HTML：

<ol id="javaList" onclick="popUp()"> 
    <li value="Item 1">One</li> 
    <li value="Item 2">Two</li> 
    <li value="Item 3">Three</li> 
</ol>

中的JavaScript：

<script> 

    window.popUp = function() { 
     var myWindow = window.open("", "", "width=400, height=200"); 
     var ls = document.getElementsByTagName("li"); 
     myWindow.document.write(ls.value); 
    } 

</script>

來源

2017-02-10 CScottRun

有代碼中的幾個問題。

您不需要在引號中包含寬度和高度，並且您可以使用onclick處理程序捕獲the event argument的元素。你window.popup功能應該是：

<script> 
window.popUp = function(event) { 
    var myWindow = window.open("", "", 400, 200); 
    var ls = event.currentTarget; 
    myWindow.document.write(ls.value); 
} 
</script>

來源

2017-02-10 04:12:06 thealmightygrant

見我的解決方案，以及;你無法獲得「li」的價值。因此，最後一行應該看起來像'myWindow.document.write（ls.getAttribute（'data-value'））;'修改HTML以將'value'替換爲'data-value'。 – Sablefoste

你不能得到一個li返回在任何情況下0的value。請嘗試將其更改爲data-value。

如果您正在使用jQuery庫，解決方案將變得微不足道。你的HTML將成爲：

<ol id="javaList"> 
    <li data-value="Item 1">One</li> 
    <li data-value="Item 2">Two</li> 
    <li data-value="Item 3">Three</li> 
</ol>

和JavaScript將成爲：

$('li').on('click', function(event){ 
    var myWindow = window.open("", "", "width=400, height=200"); 
    myWindow.document.write($(this).data('value')); 
}

來源

2017-02-10 04:36:43 Sablefoste

JavaScript - 點擊列表項目時帶有文本的彈出式窗口

回答

相關問題