Question

我有一个xhtml页面，我显示一个表，这个表必须按asc和desc顺序排序。最初我显示一个名为01的img现在单击此01我的图像必须更改为02，同时还对表格进行排序，我已经在外部.js文件中编写了js代码。现在，如果我再次单击图像02，它应该通过调用外部.js文件中的降序函数来更改为03。

my xhtmlcode

 <center>
     PAID IMPRESSIONS 
     <input type="image" id="table_sorter" src="../img/up-down.png" onclick="sort_imp()" />
 </center>

我的javascript代码更改图片并调用其他功能

 function sort_imp() {

            if (document.getElementById("table_sorter").src === "../img/up-down.png")
            {
                document.getElementById("table_sorter").src = "../img/view-sort_ascending.png"
               sorting_imp_asc();

            }
            else if (document.getElementById("table_sorter").src === "../img/view_sort_ascending.png")
            {
                document.getElementById("table_sorter").src = "../img/view_sort_descending.png";
               sorting_imp_des();
            }

        }

Answer 1

在这种情况下，JavaScript会从root提供图片网址，因此无法与../img/....格式进行比较。
即document.getElementById("table_sorter").src === "../img/up-down.png"

您可以尝试indexOf()：

function sort_imp() {
        /*copies full img path to a string*/
        var str = document.getElementById("table_sorter").src;

        /*check that, img path contains required string*/
        if (str.indexOf("img/up-down.png")>=0) {
            document.getElementById("table_sorter").src = "../img/view-sort_ascending.png"
            sorting_imp_asc();

        }
        else if (str.indexOf("img/view-sort_ascending.png")>=0) {
            document.getElementById("table_sorter").src = "../img/view-sort_descending.png";
            sorting_imp_des();
        }

    }

单击更改图像和调用功能上的图像

1 个答案: