Question

我正试图通过下面的脚本找出我所遗漏的内容。我的目标是拥有一个有序列表（按照分配要求），当单击任何列表项时，会出现带有文本的弹出窗口。每个列表项都会导致不同的文本。

我知道可能有更有效的方法来做到这一点，这在我目前的理解范围之外，所以我试图在下面进行以下[非工作]解决方法。

示例：当用户单击“一个”列表项时，会出现一个弹出窗口，其中的文本显示为“项目1”，但结果是“未定义”。有什么提示吗？

我的测试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>

Answer 1

您的代码中存在一些问题。

您不需要在引号中使用宽度和高度，并且可以从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>

Answer 2

在每种情况下，您都无法获得value li的{{1}}返回0。请尝试将其更改为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'));
}

JavaScript - 单击列表项时带文本的弹出窗口

2 个答案: