IE8: element: first-child deos не работает (выбирает родителя того, что я на самом деле хочу) - PullRequest
Новая
       2

IE8: element: first-child deos не работает (выбирает родителя того, что я на самом деле хочу)

1 голос
/ 04 октября 2011

Работает в 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;
});

Ответы [ 2 ]

2 голосов
/ 04 октября 2011

Я подозреваю, что у IE просто проблема с разметкой в ​​class атрибутах. Я бы не стал винить IE, потому что он абсолютно недействителен. В действительности решение заключается в том, чтобы сделать разметку чище и скопировать только соответствующие разделы текста / разметки из параметров в заголовок состояния .

Я немного очистил разметку и переработал jQuery, чтобы выбрать только text() и class, необходимые для манипулирования элементом status-header. По сути, я превратил параметры в неупорядоченный список, а не использовал комбинацию <div> и <span>. Так что это может быть не совсем то, что вам нужно, поскольку я не уверен, что вы можете изменить наценку, и я также удалил класс .badge.

Проблемы заключались главным образом в том, что JavaScript добавлял HTML-контент в атрибут class элемента .status-header span, но большая часть текста в примере находилась вне какого-либо элемента, поэтому JavaScript фактически выбирал слишком много контента каждый время. Другая проблема, с которой я столкнулся, заключалась в том, что вы уже продублировали разметку для заголовка вторичного статуса, поэтому вместо того, чтобы каждый раз заменять этот HTML, было проще просто извлечь один класс («Open», «Accepted» или « Отклонено ») и текст опции .

Существует еще многое, что можно сделать для упрощения кода, например, .class и text(), копируемые в заголовок, теперь точно такие же, поэтому их следует упростить.

Вот демоверсия , которая работает для меня в Chrome и IE8

Для полноты, вот весь код:

HTML 

<div class="proposal_status">
    <div id="change_status_menu" style="">
        <div class="change_status_menu">
            <ul class="container">
                <li class="Open" name="1">Open</li>
                <li class="Accepted" name="2">Accepted</li>
                <li class="Declined" name="3">Declined</li>
            </ul>
        </div>
        <div class="arrow_border_2"></div>
        <div class="arrow_border"></div>
        <div class="arrow"></div>
    </div>

    <input id="proposal_status" name="proposal[status]" type="hidden" value="2">
    <div class="status">
        <div class="status_header">
            <span class="Accepted">Accepted</span>
            <div class="action_button change_status">Change Status</div>
        </div>
        <div class="info">
            <div class="prop-status-details">
                Accepted by 
                <strong>aoei eui</strong> from 
                <strong>127.0.0.1</strong>
            </div>
        </div>
    </div>
</div>

JavaScript 

$j = jQuery.noConflict();

$j(function() {
    $j(".change_status").click(function() {
        $j('#change_status_menu').fadeToggle("fast");
    });
    $j('li').click(function() {
        $j('#change_status_menu').fadeToggle("fast");
        $j(".status .status_header span").attr("class", $j(this).attr('class'));
        $j(".status .status_header span").html($j(this).text());
        $j('#proposal_status').val($j(this).attr("name"));
        unsaved_changes = true;
    });
});

CSS 

.no_padding{
    padding: 0px !important;
}
.properties-shell {
    background: #f3f3f3;
    width: 930px;
    position: relative;
    border-right: solid 10px #f3f3f3;
    border-left: solid 10px #f3f3f3;

}
.properties-shell-top {
    margin-top: 15px;
    background: url(../images/bucket_wide_bg.gif) no-repeat;
    width: 950px;
    height: 10px;
    overflow: hidden;
}
.properties-shell-bottom {
    background: url(../images/bucket_wide_bg.gif) 0 -10px no-repeat;
    width: 950px;
    height: 10px;
    overflow: hidden;
}
.properties-main {
    background: #FFF;
    display: table;
    border-left: solid 1px #e5e5e5;

}
.properties_header{
    border-right: solid 1px #e5e5e5;

    display: block;
    height: 38px;
    border-top: rgb(229,229,229);
    background: #e5e5e5;
    background: -webkit-gradient(linear, left bottom, left top, 
        color-stop(0%,#e5e5e5), 
        color-stop(96%,#f2f2f2), 
        color-stop(97%,#ffffff), 
        color-stop(98%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Opera11.10+ */
    background: -ms-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* W3C */
}
.properties_first_col{        
    padding: 20px;
    width: 415px;
    float: left;
    display: inline-block;
}
.properties_second_col{
    padding: 20px;
    padding-right: 15px;
    width: 210px;
    float: left;
    display: inline-block;
}
.properties_options{
    background: #F7F7F7;
    float: right;
    padding: 20px;
    width: 187px;
    border-left: solid 1px #e1e1e1;
    border-right: solid 1px #e1e1e1;
    border-bottom: solid 1px #e1e1e1;
    min-height: 268px;
}

.option_select{
    padding: 5px;
    padding-top: 0px;
    padding-bottom: 10px;
    font-size: 13px;
    color: #747474;
}

.proposal_status {
    position: absolute;
    top: 266px;
    right: 0px;
    margin-right: 1px;
}
.change_status_menu {
    border-radius: 5px;
    background: rgba(235,235,235, 0.95);
    border: 1px solid #d3d3d3;
    width: 142px;
    height: 110px;
    position: absolute;
    z-index: 1000;
    right: 10px;
    bottom: 77px;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0px 2px 2px rgba(0,0,0,0.1);

}
.change_status_menu .container{
    border: 1px solid white;
    padding: 5px;
    border-radius: 4px;
}
.change_status_menu .container li {
    display: block;
    width: 120px;
    padding:5px 0 5px 10px;
    margin:0;             
}

.change_status_menu .container li:hover{
    background: -webkit-linear-gradient(top, #ffffff 2%, #e9e9e9 96%, #F3F3F3 85%, #e9e9e9 96%, #ffffff 98%); /* Chrome10+,Safari5.1+ */
    border: 1px solid #d7d7d7;
    border-radius: 3px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 9px;
}
.arrow {
    z-index: 1003;
    border-color: #EDEDED transparent transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    right: 38px;
    bottom: 60px;
}
.arrow_border {
    z-index: 1001;
    border-color: #d3d3d3 transparent transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    right: 38px;
    bottom: 58px;
}
.arrow_border_2 {
    z-index: 1002;
    border-color: #fff transparent transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    right: 38px;
    bottom: 59px;
}
.proposal_status .status{
    width: 227px;
}
.proposal_status .status .status_header,
.proposal_status .status .Unpublished{
    background: #e5e5e5;
    background: -webkit-gradient(linear, left bottom, left top, 
        color-stop(0%,#e5e5e5), 
        color-stop(96%,#f2f2f2), 
        color-stop(97%,#ffffff), 
        color-stop(98%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* Opera11.10+ */
    background: -ms-linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(bottom, #e5e5e5 0%, #f2f2f2 96%, #ffffff 97%, #e5e5e5 98%); /* W3C */

    width: 227px;
    height: 30px;
}
.proposal_status .status .status_header .change_status{
    width: 88px;
    font-size: 9px;
    float: right;
    display: inline-block;
    margin: 5px;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: pointer;
}
.proposal_status .Accepted,
.proposal_status .Declined,
.proposal_status .Open{
    margin: 5px;
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    color: #848484 !important;
    text-shadow:#fff 0px 1px 0, #fff 0 -1px 0;                    
}
.proposal_status .Accepted .badge,
.proposal_status .Declined .badge,
.proposal_status .Open .badge,
.proposal_status .Unpublished .badge{

    width: 17px;
    height: 17px;
    display: inline-block;
    position: relative;
    top: 3px;
}
.proposal_status .Accepted .badge{
    background: url(/images/header_status_green.png) no-repeat;
}

.proposal_status .Declined .badge{
    background: url(/images/header_status_blue.png) no-repeat;
}

.proposal_status .Open .badge{
    background: url(/images/header_status_grey.png) no-repeat;
}

.proposal_status .Unpublished .badge{
    background: url(/images/header_status_white.png) no-repeat;
}

.proposal_status .status .info{
    background: #F2F2F2;
    background: -webkit-gradient(linear, left bottom, left top, 
        color-stop(0%,#F2F2F2), 
        color-stop(100%,#D6D6D6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F2F2F2', endColorstr='#D6D6D6',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(bottom, #F2F2F2 0%, #D6D6D6 100%); /* W3C */
    box-shadow: inner 0 2px 2px #bbb;
    -moz-box-shadow: inset 0 2px 2px #bbb;
    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}

.prop-status-details {
    padding: 10px;
    color: #5F5F5F;
    line-height: 15px;
}
.proposal_status .status .Unpublished{
    margin-top: 95px;
    text-transform: uppercase;
    text-indent: 10px;
    line-height: 30px;
    font-size: 14px;
    color: #818181;
    text-shadow:#fff 0px 1px 0, #fff 0 -1px 0;
    box-shadow: none;
}

.action_button {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
    background: #FCFCFC;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 10px;
    line-height: 18px;
    color: #8B8B8B !important; 
    text-transform:uppercase !important;
    /*    text-shadow: #555 0px -1px 1px;*/
    /*    letter-spacing:1px;*/


    font-size: 11px;
    font-weight: bold;
    line-height: 18px;

}
.action_button:hover{
    text-decoration: none;
    background: #f4f4f4;
    border: 1px solid #ccc;
}
2 голосов
/ 04 октября 2011

Проблема в том, что вы устанавливаете атрибут class с содержанием html. Я сделал быстрый обходной путь:

http://jsfiddle.net/a7rXZ/4/

Простое изменение .html() с .text(). Оригинал возвращает значение, которое выглядит следующим образом (да, включая все пробелы): 

                <div class="badge"></div>
                Declined

Но вы ожидаете только текст Declined, который можно получить с помощью новой версии. Вы могли бы рассмотреть немного более сильную тактику (удаление пробелов было бы началом, но я имею в виду нечто более жесткое), хотя на данный момент новая версия работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...