Javascript更改源图像

Javascript change source image

本文关键字:图像 Javascript      更新时间:2023-09-26

当我点击链接时,我试图改变嵌套ul中的父级src=图像。下面是我的代码。我知道如何用javascript改变src=,但我不知道我需要导航多少层来改变src=图像。示例:我想改变src="test.png"当我点击Question1.Answer1.

<!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>

对象与样式属性显示或可见性:如果隐藏,没有用户操作事件可能。Remove object == Remove from HTML DOM,所以没有user-action-events。

添加一个对象到HTML DOM,所以文档必须是新的呈现。如果改变了object.style.display,结果也是一样。

$("#" + what)。附加('

  • URL到上传的文件');

    如果object.style. Visibility被更改:Visibility必须在HTML DOM中存在一个对象

    请使用

    so, var imgPointer=document.getElementById("imgID");

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

    imgPointer (value if ID)是一个相对于文档的指针(value),而不是指向。

    addLine()内部改变imgPointer。src .