javascript - 适用于除三星互联网外的所有浏览器/设备的逻辑

Question

我有一段代码适用于除 Samsung Internet 以外的所有内容。 Chrome 移动版和 chrome 开发工具移动模拟器一样运行良好。我每次尝试都会清除浏览数据。

单击服务类别按钮(下图第一张)时，它应该会打开相关联的引导折叠卡(下图第二张)。

第一张图片:

第二张图片:

这是 github 仓库 https://github.com/dByler1/windle-chimney https://dbyler1.github.io/windle-chimney/

.on('click', function(){} 部分有效。每个变量都干净地记录下来。它不会进入逻辑 block 。

$(".servicesBTN").on("click", function (e) {
  //get the data target value of the button that was clicked which is the same as the accordian content IDs
  let dataTarget = this.getAttribute("data-target")
  let servicesDisplayValue = getComputedStyle(document.getElementById('servicesDescriptions')).display

  //all three console.logs fire and log expected results
  console.log('data target ' + dataTarget)
  console.log('services display value ' + servicesDisplayValue)
  console.log('test hasClass' + $(dataTarget).hasClass('show'))

  //if the clicked button's associated card does have the show class, set the data toggle to blank so it won't change
  //none of the logs in the if blocks fire
  if ($(dataTarget).hasClass("show") && servicesDisplayValue === 'block') {
    this.setAttribute("data-toggle", "")
    console.log('first block - already open - display block')
  } else if ($(dataTarget).hasClass("show") && servicesDisplayValue === 'none') {
    this.setAttribute("data-toggle", "")
    mobileShowServiceInfo($(this))
    console.log('second block - already open - display none - mobile assumption')
  }
  else {
    //give the clicked button a data-toggle of collapse so it will open
    this.setAttribute("data-toggle", "collapse")
    mobileShowServiceInfo($(this))
    changeAllAngleIcons($(this))
    console.log('third block - ')
  }
})

Answer 1

这里假设您遇到的三星互联网 (SI) 问题的来源。

首先，问题出在函数调用中:mobileShowServiceInfo($(this))。不在 if/else block 中。

在那个函数中，那一行是问题所在:( From OP's GitHub repo )

document.getElementById('backBTN').classList.replace('d-none', 'd-md-none')

所以我猜 SI 真的不喜欢 .replace() 的未分配结果。

这应该可行:

let tempClassList = document.getElementById('backBTN').classList;
document.getElementById('backBTN').classList = tempClassList.replace('d-none', 'd-md-none');

但这虽然更短更清晰，但解决了问题:

$('#backBTN').removeClass('d-none').addClass('d-md-none');

所以我猜测不是简单地丢弃.replace()结果因为没有赋值，SI只是破坏了代码。 ..

---

除了建议:在每个代码行的末尾使用一些分号 ; 。更多信息请阅读 this SO answer .

;)