Question

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

使用Javascript：

$(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();
      });              
    }      
  });
});

我也发现控制台没有错误。我试图通过在调用colorbox期间使用硬编码的类名来解决此问题，但仍然没有调用/显示它。任何人都可以帮我在谷歌浏览器中使这个东西变得可行吗？提前谢谢。

Answer 1

这里有一些问题：

<option>元素没有属性href;使用value代替
您在.classname上调用了彩盒（例如.delete_user），这是一个<option>元素，而不是您要显示的div
语法似乎有问题：尽管已记录，但无法按预期工作;与

$.colorbox()

href

修复了上述问题后，我开始工作了。 Demo here

为什么jQuery Colorbox在Mozilla Firefox中正常运行在以下情况下无法在Google Chrome中运行？

1 个答案: