Javascript 为什么在以下场景中，在Mozilla Firefox中正常运行的jQuery Colorbox在Google Chrome中无法正常运行？

我的HTML和jQuery代码如下。这在Mozilla Firefox中正常运行，但在Google Chrome中不正常：

<select name="select_option">
  <option value="0">--Select Action--</option>
  <option value="1" class="delete_user" href="#deletePopContent">Delete User</option>
  <option value="2" class="disable_user" href="#disablePopContent">Disable User</option>
  <option value="3" class="update_user" href="#updatePopContent">Update Class and Section</option>
  <option value="4" class="default_user" href="#defaultPopContent">Change Password</option>
</select>
<!-- The following four popups are not getting displayed when there is a call for them -->
<div class="hidden">
  <div id="deletePopContent" class="c-popup">
    <h2 class="c-popup-header">Delete Users</h2>
    <div class="c-content">         
      <h3>Are you sure to delete selected users?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="delete_url">Delete</a> 
    </div>
  </div>
</div>
<div class="hidden">
  <div id="disablePopContent" class="c-popup">
    <h2 class="c-popup-header">Disable Users</h2>
    <div class="c-content">         
      <h3>Are you sure to disable selected users?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="disable_url">Disable</a> 
    </div>
  </div>
</div>
<div class="hidden">
  <div id="updatePopContent" class="c-popup">
    <h2 class="c-popup-header">Update Class and Section</h2>
      <div class="c-content">         
        <h3>Are you sure to update class and section for selected users?</h3>
        <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
        <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="update_url">Update</a> 
    </div>
  </div>
</div>
<div class="hidden">
  <div id="defaultPopContent" class="c-popup">
    <h2 class="c-popup-header">Change Password</h2>
    <div class="c-content">         
      <h3>Are you sure to change password?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="default_url">Change</a> 
    </div>
  </div>
</div>
<!-- Only this eorror popup is getting displayed when there is a call to it-->  
<div class="hidden">
  <div id="errmsg" class="c-popup">
    <h2 class="c-popup-header">Error</h2>
    <div class="c-content">         
      <h3>Please select at least one user</h3>
      <a href="#"class="c-btn">Ok</a>
    </div>
  </div>
</div>

我在控制台中也没有发现错误。我试图通过在调用colorbox期间使用硬编码的类名来解决这个问题，但它仍然没有被调用/显示。

---

谁能帮我在谷歌Chrome上实现这个功能？提前感谢。

这里有一些问题：

• 元素没有属性

  href

  ；改为使用

  值

• 在

  .classname

  上调用colorbox（例如

  .delete\u user

  ），它是
  元素，而不是要显示的div
• 在非工作情况下使用的语法似乎有缺陷：虽然有文档记录，但并没有按预期工作；使用以前使用的

  href

  返回到

  $.colorbox（）

---

在解决了上述问题后，我让它工作了

您有三个对名为

.ez checked

的类的调用，但这些调用都没有分配该类，并且该类不存在于您给定的标记中。这个问题还有没有你没有提到的地方？

$(document).ready(function() { 
  $('select[name="select_option"]').change(function(e) {
    e.preventDefault();
    $(this).clearQueue(); 
    var checkedUsers = $('div .ez-checked input').length;    
    if(checkedUsers == 0) {       
      $('select[name="select_option"]').prop('selectedIndex',0);
/*Here I'm giving the call to error colorbox. It's working fine in both Firefox as well as chrome*/
      $.colorbox({inline:true, width:444, href: "#errmsg"});
      $(".c-btn").bind('click', function(){
        $.colorbox.close();
      });
      return false;
    } else { 
      if($("#ckbCheckAll").hasClass('ez-checked')) { 
        var childchklen = $('div .ez-checked input:not(#ckbCheckAll)').length;        
        if(childchklen == 0) {          
          $('select[name="select_option"]').prop('selectedIndex',0);
/*Here I'm giving the call to error colorbox. It's working fine in both Firefox as well as chrome*/
          $.colorbox({inline:true, width:444, href: "#errmsg"});
          $(".c-btn").bind('click', function(){
            $.colorbox.close();
          });
          return false;
        }
      }

      var classname = $('select[name="select_option"]')
        .find(':selected').attr('class');
/*Here I'm giving the call to corresponding colorbox. It's working fine in Firefox but not in chrome*/
      $('.'+classname).colorbox({inline:true, width:666});

      $(".c-btn").bind('click', function(){
        $.colorbox.close();
      });              
    }      
  });
});