此代码在代码段中有效，但在博客中却没有

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-->

以下代码工作正常

＆＃13;

＆＃13;

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';

＆＃13;

<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-->

＆＃13;

＆＃13;

＆＃13;

Answer 1

似乎你的小提琴也无法正常工作，正如评论中建议的那样，在页面（文档）准备就绪后执行你的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

Answer 2

解决！我在<script>标记之后添加了我的</div>，其工作方式如下，是我的blog中的代码。

我得到了我想要的结果我的意思是如果隐藏了一个小部件并且显示了另一个要显示的小部件我使用if (now.getSeconds() % 2 == 0)以下是我在博客中添加的完整代码。我刚刚改变了，我的意思是我在script之后添加了div标签。

<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>


<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() % 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';
</script>