时间戳

首页 > 解决方案 > 隐藏/显示元素不适用于移动/平板电脑，仅适用于桌面

javascript - 隐藏/显示元素不适用于移动/平板电脑，仅适用于桌面

问题描述

我有 2 个按钮，Check & Back。

当用户单击Check时，按钮应更改为Back，因此他们不能连续单击Check 2 次。但是，在 chrome devtools 的移动视图上，这不起作用。

有什么建议吗？提前致谢！

<button type="button" class='btn goCheck' id="goCheck" data-show="back" style="width: 100%;">Check</button>

<button type="button" class='btn goBack' id="back" style="width: 100%; display: none;" onClick="refreshPage()">Back</button>

$(document).ready(function(){
  $('.goCompare').click(function(){
    $('.goCheck').hide() 
    $('.selectBtn').hide()
    $('#'+$(this).attr('data-show')).show()
  })
})

标签： javascriptjqueryhtmlcss

解决方案

我已经在 Chrome Devtools 中测试了这个答案并确认了功能。

我认为 jquery 在这里有点矫枉过正，我认为如果你只有一个由事件侦听器控制的按钮会更好。

    document.getElementById("goCompareBack").addEventListener('click', function(e) {
        if (document.getElementById("goCompareBack").innerHTML === "Back") {
            refreshPage();
        } else {
            document.getElementById("goCompareBack").innerHTML = "Back";
            compare();
        }
    })
    
    function refreshPage() {
        window.location.reload();
    }
    
    function compare() {
        // comparing logic here
    }
<button type="button" class='btn goCompareBack' id="goCompareBack" data-show="compareBack" style="width: 100%;">Compare</button>

推荐阅读