Question

以下代码在IE以外的浏览器中正常工作。在IE中，只有#toggle-instructions处理程序可以正常工作，但#toggle-cue-sheet-instructions不能。任何人都知道为什么IE有这个问题？当点击带有id = toggle-instructions的链接时点击带有id = toggle-cue-sheet-instructions的链接时，没有任何作用。我试过切换，但是，如果我没记错的话，我在其中一个浏览器中遇到了问题，而是选择了这条路线（这不是我的偏好）。一切都在Safari和Firefox中完美运行（还有什么新东西？）。

$(document).ready(function(){
  $("#toggle-instructions").click(function() {
    if ($("#download-items #instructions").is(":hidden")) {
      $("#download-items .instructions-link a").text("Hide download instructions");
      $("#download-items #instructions").slideDown("slow");
    }
    else {
      $("#download-items .instructions-link a").text("View download instructions");
      $("#download-items #instructions").slideUp("normal");
    }
    return false;
  });
  $("#toggle-cue-sheet-instructions").click(function() {
    if ($("#prs-info-container #instructions").is(":hidden")) {
      $("#prs-info-container .instructions-link a").text("Hide cue sheet instructions");
      $("#prs-info-container #instructions").slideDown("slow");
    }
    else {
      $("#prs-info-container .instructions-link a").text("View cue sheet instructions");
      $("#prs-info-container #instructions").slideUp("normal");
    }
    return false;
  });
});

Answer 1

查看您的代码，您似乎不止一次使用instructions ID。

如果是这种情况，您需要更改HTML标记，这样您就不会多次重复使用ID。页面上的ID必须是唯一的。

正是这两行让我觉得您正在重用instructions作为ID

  $("#download-items #instructions").slideDown("slow");
  ...
  $("#prs-info-container #instructions").slideDown("slow");

如果您尝试使用不唯一的ID进行选择，事情就会中断。

一般来说，解决方案是在需要/想拥有多个时使用类而不是ID。

如果instructions是一个类，那么这两行就会是这样的。

  $("#download-items .instructions").slideDown("slow");
  ...
  $("#prs-info-container .instructions").slideDown("slow");

现在使用the . class selector代替the # ID selector。

当然，您还需要更改HTML标记，以便使用class="instructions"代替id="instructions"。

jQuery代码到处工作但IE，为什么？

1 个答案: