更改按钮文本和功能 onClick 在 Ipad/iPhone 上不起作用答案

【问题标题】：Changing button text and function onClick not Working on Ipad/iPhone更改按钮文本和功能 onClick 在 Ipad/iPhone 上不起作用
【发布时间】：2019-12-09 15:28:17
【问题描述】：

我当前的 Web 应用程序上有一个按钮。

当您打开页面时，它会显示比较，点击后会并排比较 2 个产品。
点击比较后，按钮变为返回，点击后会刷新页面。

问题是这只适用于桌面。当我通过 chrome devtools 将其更改为 iPhone 或 iPad 时，即使单击它也会保持比较状态并且不会更改。

我尝试过：创建两个单独的按钮，在适当的时候显示/隐藏，并使用一个按钮并更改其文本，但无论哪种方式，它都适用于桌面，但不适用于 iPhone/iPad 视图。

非常感谢任何帮助！

<div class="list-group">   
  <button type="button" class='btn goCompare' id="goCompare" data-show="compareBack" style="width: 100%;">Compare</button>
</div>

<body>
  <div>
      <button id="compare">Compare</button>
      <button id="back" style="display: none;">Back</button>
  </div>
  <script type="text/javascript">
    document.getElementById('compare').onclick=function(){
      document.getElementById('compare').style.display = "none";
      document.getElementById('back').style.display = "block";
    }
    document.getElementById('back').onclick=function(){
      document.getElementById('compare').style.display = "none";
      refreshPage();
    }
    function refreshPage() {
      window.location.reload(true);
    }
  </script>
</body>

【问题讨论】：

添加和删除类
我同意@MaxBaldwin 你应该使用一个类来查看它是否正确切换。我尝试用笔运行您的代码，它似乎运行正常。此外，不相关但希望使用 querySelectors 可能会使您的代码更易于阅读。你也可以将你的 goCompare dom 节点选择器提取到一个变量中，这样你就不必调用它两次了。

标签： javascript php html

【解决方案1】：

我建议您使用两个按钮而不是一个（返回和比较），并根据您的需要隐藏其中一个。您可以按如下方式使用元素的显示属性：

 document.getElementById("goCompare").style.display = "none";

【讨论】：

【解决方案2】：

您不应该制作第二个按钮。您应该简单地使用一个类来指示您的按钮处于什么状态。

我为您的按钮添加了一个类，表明这不是按钮的刷新状态。

 <button type="button" class='noRefresh btn goCompare' id="goCompare" data-show="compareBack" style="width: 100%;">Compare</button>

这是一个使用该类来改变按钮状态的函数

<script>
function onClick() {
    var classes = this.classList;
  if (classes.contains('isRefresh')) {
    // refresh
    console.log('refresh');
    this.classList.add('noRefresh');
    this.classList.remove('isRefresh');
   } else if (classes.contains('noRefresh')) {
    // don't refresh
    console.log('no refresh');
    this.classList.add('isRefresh');
    this.classList.remove('noRefresh');
   }
}

document.getElementById('goCompare').onclick=onClick
</script>

关键字this 是对按钮的引用。不是功能。您可以打开您的 javascript 控制台并在此 JSFiddle 中查看控制台日志。

【讨论】：

@bicycle4431 看看我添加的 jsFiddle。正如我所提到的，我必须在您的 HTML 中添加一个类。上面的代码确实有效，所以检查你的实现

【解决方案3】：

问题在于location.reload()，它已知在 Mac 设备上存在错误。尝试将其更改为location.reload(true) 查看工作中的 Codepen here

【讨论】：

不幸的是，这仍然没有解决问题，但即使这是问题所在，甚至按钮中的文本也没有改变......
我在我的机器上运行了代码，将设备更改为 iPhone X，然后是 iPad Pro，它运行正常，您能否添加更多您认为可能与问题相关的代码？
此时我将按照@SaWo 发布的答案进行操作。看到问题不一定是location.reload()，因为它甚至不会更改按钮内的文本我只会创建2个单独的按钮并通过Javascript更改样式以相应地显示/隐藏按钮（不要忘记包含@ 987654325@ 两个按钮中的类，这样您就不必重新编写任何依赖于该类的 php/js 代码
我使用 ``` 来更好地缩进你的代码，以便在 SO 上更容易查看（在 SO 上编写代码时，我通常使用 ``` 而不是 4 个制表符）除此之外，代码是@SaWo 所建议的，没有严格的“最佳方法”来解决这个问题，使用 location.reload() 会不那么痛苦，但正如我们看到它在 IOS 上有点麻烦，我认为这是适合您的特定问题的正确解决方案案例，不要忘记将@SaWo 的答案标记为正确答案！