javascript - 此代码在片段中有效，但在博客中无效

Question

这是我的 blog我在我的博客中添加了如下代码。下面的代码在代码片段中正常工作，如下面的示例所示，但它在我的博客中无法正常工作，我在博客平台上使用它，我应该使用任何 jquery 库来使其工作。请参阅下面的代码片段，它在代码片段中运行良好。我的目标是在我的博客中显示另一个小部件但同时显示 2 个小部件时隐藏一个小部件。 example fiddle is working fine

<script type="text/javascript">
var control1VisibleCheck = function () {
  var now = new Date();
  //TODO: modify this logic to your needs: have a look on the Date() object's members and methods to implement what you need
  if (now.getSeconds() % 20 == 0)    //I'd like to show control1 on even minutes
    return true;
  return false;
}

if (control1VisibleCheck())
  document.getElementById('multi-search-groups').style.display = 'none';
else
  document.getElementById('multi-search').style.display = 'none';
</script>



<div id="multi-search">
  <select id="cmbColumn" name="cmbColumn">
    <option value="" />Columns
    <option value="apple+" />apple
    <option value="grapes+" />grapes
  </select>
  <select id="cmbSidebar" name="cmbSidebar">
    <option value="" />Sidebars
    <option value="mango+" />mango
    <option value="berry+" />berry

  </select>
</div>

<div id="multi-search-groups">
  <em>Multiple Select with Groups</em><br />
  <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
    <option value="" />
    <optgroup label="NFC EAST">
      <option />Dallas Cowboys
      <option />New York Giants
      <option />Philadelphia Eagles
      <option />Washington Redskins
    </optgroup>
  </select>
</div>

<!--div id="control1" style="width: 200px; height: 100px; background-color: red;">
</div>
<div id="control2" style="width: 200px; height: 100px; background-color: green;">
</div-->

下面的代码运行良好

var control1VisibleCheck = function () {
  var now = new Date();
  //TODO: modify this logic to your needs: have a look on the Date() object's members and methods to implement what you need
  if (now.getSeconds() % 2 == 0)    //I'd like to show control1 on even minutes
    return true;
  return false;
}

if (control1VisibleCheck())
  document.getElementById('multi-search-groups').style.display = 'none';
else
  document.getElementById('multi-search').style.display = 'none';

<div id="multi-search">
  <select id="cmbColumn" name="cmbColumn">
    <option value="" />Columns
    <option value="apple+" />apple
    <option value="grapes+" />grapes
  </select>
  <select id="cmbSidebar" name="cmbSidebar">
    <option value="" />Sidebars
    <option value="mango+" />mango
    <option value="berry+" />berry

  </select>
</div>
  
<div id="multi-search-groups">
  <em>Multiple Select with Groups</em><br>
  <select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
    <option value=""></option>
    <optgroup label="NFC EAST">
      <option>Dallas Cowboys</option>
      <option>New York Giants</option>
      <option>Philadelphia Eagles</option>
      <option>Washington Redskins</option>
    </optgroup>
  </select>
</div>

<!--div id="control1" style="width: 200px; height: 100px; background-color: red;">
</div>
<div id="control2" style="width: 200px; height: 100px; background-color: green;">
</div-->

Answer 1

似乎你的 fiddle 也不能正常工作，正如评论中所建议的那样，在页面(文档)准备好后执行你的 JavaScript:

JavaScript 文档就绪函数

(function() {
    // your code here
});

完整的 JavaScript:

(function() {
    var control1VisibleCheck = function () {
      var now = new Date();
      //TODO: modify this logic to your needs: have a look on the Date() object's members and methods to implement what you need
      if (now.getMinutes() % 2 == 0)    //I'd like to show control1 on even minutes
        return true;
      return false;
    }

    if (control1VisibleCheck())
      document.getElementById('multi-search-groups').style.display = 'none';
    else
      document.getElementById('multi-search').style.display = 'none';
});

Working JSFiddle