未对 HTML 进行更改-解网

问：

我希望将子元素“.summary-thumbnail-event-date”隐藏在特定的父元素“#block-yui_3_17_2_1_1697649009477_55853”元素中。此代码有效。

function myFunction(parent_elem_id, child_elem ) {
  const hasID = document.getElementById(parent_elem_id);
  if (hasID !== null) {
    console.error('ID div not found');
  }
  var hasSelector = hasID.querySelector('.' + child_elem);
  if (hasSelector !== null) {
    console.error('Class div not found');
  }
  if (hasSelector) {
  // Change hasSelector var Name
    var OldDiv = hasSelector
    // Creates new div
    var NewDiv = document.createElement('div');
    NewDiv.className = child_elem;
    NewDiv.style.visibility = 'hidden';
    // Adjust the visibility
    NewDiv.innerHTML = OldDiv.innerHTML;
    // InsertBefore
    OldDiv.parentNode.insertBefore(NewDiv, OldDiv);
    OldDiv.parentNode.removeChild(OldDiv);
    return NewDiv
    } else {
      console.error('Child div not found');
    }
  }
//
document.addEventListener('DOMContentLoaded', function() {
  myFunction('block-yui_3_17_2_1_1697649009477_34199', 'summary-thumbnail-event-date');
  });

<div id='block-yui_3_17_2_1_1697649009477_34199'>
  <div class='summary-thumbnail-event-date'>
    <p>This is a block.</p>
  </div>
</div>
<div id='block-yui_3_17_2_1_1699287411992_11273'>
  <div class='summary-thumbnail-event-date'>
    <p>Something to think about.</p>
  </div>
</div>
<div id='block-yui_3_17_2_1_1697649009477_55853'>
  <div class='summary-thumbnail-event-date'>
    <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

JavaScript HTML DOM

function myFunction(parent_elem_id, child_elem ) {
  const hasID = document.getElementById(parent_elem_id);
  if (hasID !== null) {
    console.error('ID div not found');
  }
  var hasSelector = hasID.querySelector('.' + child_elem);
  if (hasSelector !== null) {
    console.error('Class div not found');
  }
  if (hasSelector) {
  // Change hasSelector var Name
    var OldDiv = hasSelector
    // Creates new div
    var NewDiv = document.createElement('div');
    NewDiv.className = child_elem;
    NewDiv.style.visibility = 'hidden';
    // Adjust the visibility
    NewDiv.innerHTML = OldDiv.innerHTML;
    // InsertBefore
    OldDiv.parentNode.insertBefore(NewDiv, OldDiv);
    OldDiv.parentNode.removeChild(OldDiv);
    return NewDiv
    } else {
      console.error('Child div not found');
    }
  }

您可以简化一切。最初，只定义一个函数参数;对于您的任务来说，这确实足够了

function hideElement(selector) {}

您应该将正确的选择器作为参数传递。请记住，将字符串转换为选择器不是您的函数职责。从中构建正确的选择器。

hideElement('#block-yui_3_17_2_1_1697649009477_34199.summary-thumbnail-event-date');

此外，您可以找到该元素并验证其存在。

function hideElement(selector) {
  const target = document.querySelector(selector);
  if (target) return;
}

然后，您可以更改样式。

function hideElement(selector) {
  const target = document.querySelector(selector);
  if (target) return;
  target.style.display = 'none';
  // target.style.visibility = 'hidden';
}

最后，检查页面上的功能结果。但是，更好的方法是创建一个具有隐藏属性的 CSS 类并相应地切换它。

.hidden {
  visibility: hidden;
}

function toggleHiding(selector) {
  const target = document.querySelector(selector);
  if (target) return;
  target.classList.toggle('hidden');
}

最好的方法 - 使用清晰方便的类构建标记。

<div class="card" id="block-yui_3_17_2_1_1697649009477_34199">
  <div class="card-content summary-thumbnail-event-date">
    <p class="card-text">This is a block.</p>
  </div>
</div>
<div class="card" id="block-yui_3_17_2_1_1697649009477_34199">
  <div class="card-content summary-thumbnail-event-date">
    <p class="card-text">Something to think about.</p>
  </div>
</div>

未对 HTML 进行更改

Changes to HTML not happening

评论

评论