IE8：element：first-child deosn't工作（选择我真正想要的父级）
适用于 chrome，不适用于 ie8： http://jsfiddle.net/a7rXZ/2/
所以，当当您单击“接受”、“拒绝”或“打开”时，它会更改小单击菜单旁边的文本（同时保持左侧文本的样式（这是理想的））。但在 IE 中，它似乎正在替换父元素（因为文本的样式不保持不变）
关于如何让它在 IE8 中表现的任何想法？
这是有问题的代码：
$j('.change_option').click(function() {
$j('#change_status_menu').fadeToggle("fast");
$j(".status .status_header span:first-child").attr("class", $j(this).html());
$j(".status .status_header span:first-child").html($j(this).html());
$j('#proposal_status').val($j(this).attr("name"));
unsaved_changes = true;
});
Works in chrome, not ie8: http://jsfiddle.net/a7rXZ/2/
so, when you click on accepted, decline, or open, it changes the text adjacent to the little click menu (while maintaining styling of the text on the left (this is ideal)). but in IE, it seems to be replacing the parent element (cause the styling of the text doesn't remain the same)
any ideas for how to get this to behave in IE8?
this is the code in question:
$j('.change_option').click(function() {
$j('#change_status_menu').fadeToggle("fast");
$j(".status .status_header span:first-child").attr("class", $j(this).html());
$j(".status .status_header span:first-child").html($j(this).html());
$j('#proposal_status').val($j(this).attr("name"));
unsaved_changes = true;
});
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我怀疑 IE 只是在
class属性中的标记有问题。我不会责怪 IE，因为它完全无效。解决方案实际上是使标记更清晰，并仅将文本/标记的相关部分从选项复制到状态标题。我已经清理了一些标记并重新设计了 jQuery，以仅选择操作
status-header 所需的元素。基本上，我已将选项转换为无序列表，而不是使用text()和class和的组合。因此，这可能不完全是您想要的，因为我不确定您是否可以更改标记，并且我还删除了.badge类。问题主要在于 JavaScript 将 HTML 内容添加到
.status-header span元素的 class 属性中，而且示例中的许多文本位于任何元素之外，因此 JavaScript实际上每次选择的内容太多了。我看到的另一个问题是，您已经复制了辅助状态标题的标记，因此不必每次都替换此 HTML，而是更容易提取一个类（“打开”、“已接受”或“已拒绝”）和选项文本。。可以做更多事情来简化代码，例如复制到标头的
.class和text()现在完全相同，因此应该进行简化。这是一个在 Chrome 和 IE8 中为我工作的 演示
为了完整起见，请在此处是所有代码：
HTML
JavaScript
CSS
I suspect IE just has a problem with mark-up in
classattributes. I wouldn't blame IE though since it's totally invalid. The solution is really a case of making the mark-up cleaner and copying only the relevant sections of text/mark-up from the options to the status header.I've cleaned up the mark-up a little and re-worked the jQuery to select only the
text()andclassnecessary for manipulating thestatus-headerelement. Basically, I've turned the options into an unordered list, rather than using a combination of<div>and<span>. So it might not be exactly what you are after, since I am not sure if you can change the mark-up and I have also removed the the.badgeclass.The problems were mainly that the JavaScript was adding HTML content into the class attribute of the
.status-header spanelement, but also a lot of the text in the example was outside any element, so the JavaScript was actually selecting too much content each time. The other problem I could see was that you had already duplicated the mark-up for the secondary status heading, so rather than replacing this HTML each time, it was easier to just extract the one class ('Open', 'Accepted' or 'Declined') and the text of the option.There is more that can be done to simplify the code, for example the
.classandtext()being copied to the header are now exactly the same so should be simplified.Here is a demo which is working for me in Chrome and IE8
For completeness, here is all the code:
HTML
JavaScript
CSS
问题是您正在使用 html 内容设置
class属性。我已经完成了一个快速解决方法：http://jsfiddle.net/a7rXZ/4/
只需更改
.html()与.text()。原始返回的值如下所示（是的，包括所有空格）：但您期望的只是文本
Declined，新版本可以检索该文本。您可能想考虑一种稍微更强的策略（删除空格是一个开始，但我指的是更严格的东西），尽管现在新版本有效。The problem is that you're setting the
classattribute with html content. I've done a quick workaround:http://jsfiddle.net/a7rXZ/4/
Simply changing
.html()with.text(). The original returns a value that looks like the following (yes, including all the whitespace):But you're expecting just the text
Declined, which is retrievable by the new version. You might like to consider a slightly stronger tactic (whitespace removal would be a start, but I'm referring to something more rigid), even though for now the new version works.