javascript - 为什么断点后改变的值不显示？第2部分

Question

通过 JS 值更改的选项卡标题中的值不会在@media 断点/ Accordion 屏幕上持续存在 - 尽管选项卡式内容区域中的值会持续存在。

js代码:

function check_1_input(X, Y) {  
  var ids=X.split("_"); console.log(' X '+X+' id '+ids[1]); 
  var PX=document.getElementById(X); 
  var PY=document.getElementById(Y); 
  PX.childNodes[0].textContent = "Changed"; 
  PY.childNodes[0].textContent = "Changed";
}

在 html 的末尾进行更改 - 不确定为什么它只在该位置有效。

fiddle 是 https://jsfiddle.net/PhilB/077dbf37/10/

Answer 1

您遇到的问题是您在 check_1_input 函数中使用了元素 ID。响应式选项卡插件在初始化时克隆您的选项卡元素，使水平和垂直选项卡具有不同的类，根据媒体宽度隐藏或显示，但它保持 ID 相同。由于您的函数正在使用 getElementById 查找元素，因此它只会找到第一个元素。

最终，您会得到两个具有相同 ID 的不同元素，这是不好的做法。使用类作为选择器而不是 ID 可以解决问题。我使用 jQuery 来选择类而不是 ID，因为您已经加载了 jQuery。您可以考虑在选项卡元素中一起删除 ID，因为响应式选项卡插件总是会克隆它们并导致无效的 DOM(两个元素具有相同的 ID)。

查看我的 fiddle 更新版本 here .