Не удается получить действительные значения из текстовых полей с помощью селекторов jQuery

Question

Я хочу получить некоторые значения из текстовых полей, эти значения представляют даты и состоят из трех частей: года, месяца и дня. Таких дат две: first и last, вместе они образуют «границы» для ограничения поиска.

Когда я использую следующий js / jquery в приведенном ниже HTML-коде, я получаю бессмысленные результаты.

Я поместил HTML и JS в Jsfiddle здесь http://jsfiddle.net/grHEY/

И скопировал приведенный ниже код.

$(".date").click
        (
            function ()
            {
                var dateValueElement = this;
                var propertyId = dateValueElement.id;
                $(".numberBounds").filter("#"+propertyId).toggle();
                handle_date_change(dateValueElement);
            }
        );


function handle_date_change(dateValueElement){

var first_year = $(".firstYear").filter("#"+dateValueElement.id).val();
var first_month = $(".firstMonth").filter("#"+dateValueElement.id).val();
var first_day = $(".firstDay").filter("#"+dateValueElement.id).val();
var last_year = $(".lastYear").filter("#"+dateValueElement.id).val();
var last_month = $(".lastMonth").filter("#"+dateValueElement.id).val();
var last_day = $(".lastDay").filter("#"+dateValueElement.id).val();

}

---

<span style="display: inline;" class="numberBounds" id="74652">
    <input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="firstYear" value="1905" size="4" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="firstMonth" value="08" size="2" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="firstDay" value="07" size="2" type="text"> &lt; 
</span>
<span class="date tag half-padding margin" value="1905-08-07" id="74652">1905-08-07</span>
<span style="display: inline;" class="numberBounds" id="74652"> &lt; 
    <input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="lastYear" value="1905" size="4" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="lastMonth" value="08" size="2" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" id="74652" class="lastDay" value="07" size="2" type="text">
</span>

Answer 1

Технически, только самое большее 1 элемент может иметь определенный идентификатор.Если два или более элемента имеют один и тот же идентификатор, это является нарушением спецификации DTD для атрибута идентификатора (IDREF).

Лучший способ сгруппировать элементы - либо по атрибуту класса, либо по атрибуту имени,Если вы используете атрибут name, то document.getElementsByTagName ("thename"). Length возвращает количество элементов с этим именем.

Answer 2

Где вы добавляете класс 'date' в HTML? Клик привязан к элементу span, это то, что вы хотите?

Answer 3

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

Я удалил id из всех элементов и использую содержащие элементы в качестве области видимости для выделения текстовых полей:

http://jsfiddle.net/grHEY/7/

HTML:

<span style="display: inline;" class="numberBounds">
    <input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="firstYear" value="1905" size="4" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="firstMonth" value="08" size="2" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="firstDay" value="07" size="2" type="text"> &lt;
</span>
<span class="date tag half-padding margin" value="1905-08-07">1905-08-07</span>
<span style="display: inline;" class="numberBounds"> &lt;
    <input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="lastYear" value="1905" size="4" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="lastMonth" value="08" size="2" type="text">
    -<input onkeyup="javascript:handle_date_change(this)" valuetype="date" class="lastDay" value="07" size="2" type="text">
</span>

Javascript:

$(".date").click(

function() {
    var first = $(this).prev();
    var last = $(this).next();
    first.toggle();
    last.toggle();
    handle_date_change(first, last);
});


function handle_date_change(first, last) {

    // now we use normal filtering to get the appropriate values
    var first_year = $(".firstYear", first).val();
    var first_month = $(".firstMonth", first).val();
    var first_day = $(".firstDay", first).val();
    var last_year = $(".lastYear", last).val();
    var last_month = $(".lastMonth", last).val();
    var last_day = $(".lastDay", last).val();

    alert(first_year);

}

Answer 4

Хм, думаю, я понял, проблема в том, что вы не можете иметь несколько элементов с одинаковыми идентификаторами (даже если они находятся в разных разделах кода).Попробуйте что-то вроде этого:

http://jsfiddle.net/grHEY/5/

Хотя есть и лучшие способы сделать это.Скажите http://api.jquery.com/jQuery.data/ (.data) Или вместо того, чтобы хранить это в классе, используйте php, чтобы установить это значение в переменной js (в заголовке).

Answer 5

Я не знаю, в чем разница, но это сработало:

        $(".date").click
        (
            function ()
            {
                var dateElement = this;
                var propertyId = dateElement.id;
console.info(propertyId);           
                $(".numberBounds").filter("#"+propertyId).toggle();
                handle_date_change(dateElement);
            }
        );
    }
);

// ------ START: handle tag clicks -------

function handle_date_change(dateElement){
// grab the component parts of the date and turn them into a String that MySQL can use as query parameter

var propertyId = dateElement.id;

// now we use normal filtering to get the appropriate values
var first_year = $(".firstYear").filter("#"+propertyId).val();
var first_month = $(".firstMonth").filter("#"+propertyId).val();
var first_day = $(".firstDay").filter("#"+propertyId).val();
var last_year = $(".lastYear").filter("#"+propertyId).val();
var last_month = $(".lastMonth").filter("#"+propertyId).val();
var last_day = $(".lastDay").filter("#"+propertyId).val();
console.info(first_year+" | "+first_month+" | "+first_day+" | "+last_year+" | "+last_month+" | "+last_day); 
}

Answer 6

Ваш propertyId не находится в глобальной области видимости.Однако я не думаю, что вам нужно использовать его в глобальном масштабе.Почему бы тебе не сделать это?

$(".date").click
        (
            function ()
            {
                var dateValueElement = this;
                var propertyId = dateValueElement.id;
                $(".numberBounds").filter("#"+propertyId).toggle();
                handle_date_change(dateValueElement, propertyId);
            }
        );


function handle_date_change(dateValueElement, propertyId){

    var first_year = $(".firstYear").filter("#"+dateValueElement.id).val();
    var first_month = $(".firstMonth").filter("#"+propertyId).val();
    var first_day = $(".firstDay").filter("#"+propertyId).val();
    var last_year = $(".lastYear").filter("#"+propertyId).val();
    var last_month = $(".lastMonth").filter("#"+propertyId).val();
    var last_day = $(".lastDay").filter("#"+propertyId).val();

}

http://jsfiddle.net/grHEY/1/