Question

当我点击链接时，我试图更改嵌套ul li中父级的src = image。以下是我的代码。我知道如何使用javascript更改src =但我不知道需要多少层才能导航以更改src = image。示例：当我单击Question1.Answer1时，我想更改src =“test.png”。

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>    
    <style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li {
            /*background-image: url(/images/page.png);*/
            background-position: 0 1px;
            background-repeat: no-repeat;
            padding-left: 20px;
        }

        a {
            color: #000000;
            cursor: pointer;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .hidden {
        display:none;
        }
    </style>
    <script src="/js/jquery-1.11.1.js"></script>
        <script type="text/javascript">
            function addLine(what) {
                $("#" + what).append('<li>URL to uploaded document</li>');
            };

            function myToggle(what){
                $("#" + what).toggleClass('hidden');
            };
    function deleteLine(what) {
        $(what).parent().children().remove();
    }
    </script>
    </head>

    <body>
        <ul>
            <li class="folder">
                <a href="#" onClick="myToggle('Test1');">Test</a>
                <ul class="hidden" id="Test1">
                    <li class="folder"><img src="test.png">
                        <a href="#" onClick="myToggle('Test1-2');">Test1-2</a>
                        <ul class="hidden" id="Test1-2">
                            <li>
                                <a href="#" onClick="addLine('Question1');">This is Question 1</a>
                                <ul id="Question1"><li onClick="deleteLine(this)"> Questoin1.Answer1</li></ul>
                            </li>
                            <li>
                                <a href="#" onClick="addLine('Question2');">This is Question 2</a>
                                <ul id="Question2"></ul>
                            </li>
                            <li>
                                <a href="#" onClick="addLine('Question3');">This is Question 1</a>
                                <ul id="Question3"></ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
    </html>

Answer 1

具有样式属性显示或可见性的对象：如果隐藏，则不可能执行用户操作事件。从HTML DOM中删除对象==删除，因此无法执行用户操作事件。

将对象添加到HTML DOM，因此文档必须是新渲染的。如果object.style.display已更改，则相同。显示更改HTML DOM。

$（＆＃34;＃＆＃34; + what）.append（＆＃39;

上传文件的网址

＆＃39;）;这会改变HTML DOM。

如果object.style.visibility已更改，则不相同：可见性必须在HTML DOM中具有存在的对象。

请使用

所以，var imgPointer = document.getElementById（＆＃34; imgID＆＃34;）;

将此指针放在事件处理程序中以更改imgPointer.src。

imgPointer（如果是ID，则为值）是相对于文档的指针（值）而不是。

在addLine（）内部更改imgPointer.src。

Javascript更改源图像

1 个答案: