适用于每个 browser/device 的逻辑，三星互联网除外

Question

我有一段代码适用于除 Samsung Internet 以外的所有内容。 Chrome 移动设备工作正常，chrome 开发工具移动模拟器也是如此。我每次都清除浏览数据。

单击服务类别按钮（下图第一张）时，应该会打开关联的 bootstrap 折叠卡（下图第二张）。

第一张图片：

第二张图：

这是 github 回购 https://github.com/dByler1/windle-chimney https://dbyler1.github.io/windle-chimney/

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

$(".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

这里是关于您使用 Samsung Internet (SI) 的问题来源的假设。

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

在那个函数中，那一行是问题所在：(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.

;)

适用于每个 browser/device 的逻辑，三星互联网除外

logic that works on every browser/device except samsung internet

javascript

jquery

android

samsung-mobile