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

Question

我有一个 xhtml 页面，其中显示一个表格，该表格必须按升序和降序排序。最初我显示一个名为 01 的 img，现在单击此 01 我的图像必须更改为 02，同时还对我在外部 .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();
        }

    }