HTML 未发生更改

Question

我希望将子“.summary”元素隐藏在特定父“#block-2”元素中。这段代码有效。

function myFunction(x, y) {
  const a = document.getElementById(x);
  if (a !== null) {
    console.log('a: ', a);
  }
  var e = a.querySelector('.' + y);
  if (e !== null) {
    console.log('e:', e);
  }
  if (e) {
    // Creates new div
    var d = document.createElement('div');
    d.className = y;
    d.style.visibility = 'hidden';
    // Adjust the visibility
    d.innerHTML = e.innerHTML;
    // Insert
    e.parentNode.insertBefore(d, e);
    e.parentNode.removeChild(e);
    console.log('d: ', d)
    return d
  } else {
    console.error('Child div not found');
  }
}
//
document.addEventListener('DOMContentLoaded', function() {
  myFunction('block-2', 'summary');
});

<!-- The target div with id "myDiv" -->
<div id="block-3">
  <div class="summary">
    <p class="block">This is a block.</p>
  </div>
</div>
<div id="block-2">
  <div class="summary">
    <p>Something to think about.</p>
  </div>
</div>
<div id="block-1">
  <div class="summary">
    <p>This is the last block.</p>
  </div>
</div>

是的，您也可以为该功能执行此操作。

function myFunction(x,y) {
var a = document.getElementById(x);
var b = a.querySelector('.'+y);
return b.style.visibility = "hidden";
};

我持续关注的是代码不会更改托管环境中的 html。我正在使用 squarespace.com

Answer 1

抱歉，我无法写评论。

首先，尝试通过 DevTools 调试您的代码。使用该函数进行更改时观察元素的行为。

代码看起来正确，但我不确定它在 Squarespace 服务中的功能。

代码组件使用全名；这是至关重要的。大多数时候，我们的工作涉及阅读代码而不是编写代码。