Question

如果div为空，我想隐藏div上方的标题。内容div的内容将由于用户输入而改变。我希望标题1会在单击按钮后立即出现。

我希望使用CSS解决方案，但是我已经在页面上使用了jquery和很多javascript，因此我对所有解决方案都开放。

可以使所有标题具有唯一的ID，如果这样会使事情变得简单

function addcontent()
{
document.getElementById("Content1").innerHTML = "Extra Content";
}

	$(".rulescontent:empty").parent().hide();
	$(!".rulescontent:empty").parent().show();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>heading1</h1>
  <div  style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>
		
<div>
  <h1>heading2</h1>
  <div style="font-size:90%" id="Content2" class="rulescontent"></div>
</div>
    
<button  type='button' onclick="addcontent()">add content</button>

其他Stakcoverflow解决方案也不再让内容一旦不为空就重新出现。

Answer 1

您需要创建一个函数，并在将内容附加到div时调用它

function addcontent() {
  document.getElementById("Content1").innerHTML = "Extra Content";
  toggleEmpty()
}

function toggleEmpty() {
  $(".rulescontent:empty").parent().hide();
  $(".rulescontent:not(:empty)").parent().show();
}
toggleEmpty()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <h1>heading1</h1>
  <div style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>

<div>
  <h1>heading2</h1>
  <div style="font-size:90%" id="Content2" class="rulescontent"></div>
</div>

<button type='button' onclick="addcontent()">add content</button>

Answer 2

如果您不想在每个更改您的rulecontent div内容的地方都添加代码，则需要一个MutationObserver。像这样：

function addcontent(id) {
   document.getElementById(id).innerHTML = "Extra Content";
}
function removecontent(id) {
   document.getElementById(id).innerHTML = "";
}

$(".rulescontent:empty").parent().hide();
$(!".rulescontent:empty").parent().show();

// Options for the observer (which mutations to observe)
let config = { childList: true };

// Callback function to execute when mutations are observed
let callback = function(mutationsList, observer) {
    for (let mutation of mutationsList) {
        $(mutation.target.parentNode)
          .toggle(! $(mutation.target).is(':empty'));
    }
};

$('.rulescontent').each(function() {
    // Create an observer instance linked to the callback function
    let observer = new MutationObserver(callback);

    // Start observing the target node for configured mutations
    observer.observe(this, config);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test Case</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div>
  <h1>heading1</h1>
  <div style="font-size:90%" id="Content1" class="rulescontent"></div>
</div>
		
<div>
  <h1>heading2</h1>
  <div style="font-size:90%" id="Content2" class="rulescontent"></div>
</div>
    
Section 1: <button  type='button' onclick="addcontent('Content1')">add content</button>
<button  type='button' onclick="removecontent('Content1')">remove content</button>
<br>
Section 2: <button  type='button' onclick="addcontent('Content2')">add content</button>
<button  type='button' onclick="removecontent('Content2')">remove content</button>
</body>
</html>

（改编自MutationObserver MDN example。）

如果另一个元素为空，如何动态隐藏html元素

2 个答案: