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

Question

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

我的 xhtml 代码

 <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 从根目录给出图像-URL，因此无法与 ../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();
        }

    }

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

image on click change image and call function

javascript

sorting

onclick