Странная ситуация с методом JQuery и позиционированием элементов - PullRequest
Новая
       0

Странная ситуация с методом JQuery и позиционированием элементов

0 голосов
/ 17 июня 2011

Кто-нибудь когда-нибудь сталкивался с такой ситуацией?

У меня есть метод JQuery, который хорошо работает с селекторами и флажками КАК ДОЛГО, поскольку они расположены как предопределенные (флажок select =>).Но в тот момент, когда я позиционирую их наоборот (checkbox <= select), «эффекты» метода на флажках как-то «меняются местами» (флажок, который должен быть отключен, отсутствует, а тот, который должен быть включен, вместо этого отключен),Кроме того, это происходит не во всех случаях, а скорее «по парам» (когда флажок должен быть включен, а это не так, следующий флажок включается, когда этого не следует, а затем снова возвращается в нормальное состояние до следующего разачто-то происходит). </p>

Я говорю о двух больших div с плавающим влево и вправо, каждый из которых связывается с серией дочерних div с помощью выбора и флажка внутри каждого дочернего div;селекторы и флажки не «инвертированы» в левом большом div и инвертированы в правом большом div.

Следует отметить, что это влияет только на «инвертированные» флажки.Выбирает работу, как и ожидалось, независимо от того, как она позиционируется.

Я пытался отделить (путем создания правильного селектора JQuery) эти конфликтующие флажки по идентификатору родительского div, по классу select и т. Д. Безрезультатно.Все работает хорошо, если все элементы расположены как селекторы слева и флажки справа.

Код: 

<div>

    <div style="width: 49.5%; float: left;">

        <div>
            <select id="select_01"> 
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>
            </select>
            <input id="check_box_01" type="checkbox" />
        </div>

        <div>
            <select id="select_02"> 
                <option value="first" selected="selected">First option</option> 
                <option value="">Whatever as prompt...</option> 
            </select>
            <input id="check_box_02" type="checkbox" />
        </div>

        <div>
            <select id="select_03">
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>                    
            </select>
            <input id="check_box_03" type="checkbox" />
        </div>

        <div>
            <select id="select_04">
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>                    
            </select>
            <input id="check_box_04" type="checkbox" />
        </div>

    </div>

    <div style="width: 49.5%; float: right;">

        <div>
            <input id="check_box_05" type="checkbox" />
            <select id="select_05"> 
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>
            </select>
        </div>

        <div style="border: 1px solid red;">
            <input id="check_box_06" type="checkbox" />
            <select id="select_06"> 
                <option value="first" selected="selected">First option</option>
                <option value="">Whatever as prompt...</option> 
            </select>
        </div>

        <div style="border: 1px solid red;">
            <input id="check_box_07" type="checkbox" />
            <select id="select_07"> 
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>
            </select>
        </div>

        <div>
            <input id="check_box_08" type="checkbox" />
            <select id="select_08"> 
                <option value="">Whatever as prompt...</option> 
                <option value="first">First option</option>
            </select>
        </div>

    </div>

</div>

$(document).ready(function() {
    $("select, :checkbox").each(function() {
        if ($(this).is("select")) {
            mySelectId = $("#" + $(this).attr("id"));
            if (mySelectId.attr("value") === "") {
                mySelectId.css({
                    "background": "#D3D3D3"
                });
            }
        } else if ($(this).is(":checkbox")) {
            myCheckboxId = $("#" + $(this).attr("id"));
            if (mySelectId.attr("value") === "") {
                myCheckboxId.attr("disabled", "disabled");
            }
        }
    });
});

И проблема:

снимок экрана проблемы

Вы можете взаимодействовать с кодом, если хотите: http://jsfiddle.net/CarlosPF/Unbsb/

Любая помощь или предложения будут высоко оценены.Заранее всем спасибо.

Кстати, метод заключается в том, чтобы затемнять эти выделения, не выбрав ничего, и отключив соответствующие флажки (или наоборот)

1 Ответ

1 голос
/ 17 июня 2011

mySelectId в вашем предложении else if, если он выходит за рамки.

код обидчика (псевдоформа): 

    if (select) {
        mySelectId = "some value"
        }
    } else if (checkbox) {
        if (mySelectId.attr("value") === "") { // <-- mySelectID was never properly set!
            //do whatever
        }
    }

EDIT: Я изменил ваш JQuery: 

$(document).ready(function() {
    $("select").each(function() {
        if ( $(this).val() === "") {
            $(this).css("background-color", "#d3d3d3");
            $(this).siblings(":checkbox").attr("disabled", "disabled"); 
        }   
    });
});
...