Question

我想从文本字段中获取一些值，这些值代表日期，并由年，月和日三部分组成。有两个这样的日期，first和last日期，它们共同形成限制搜索的“界限”。

当我在下面的HTML上使用以下js / jquery时，我得到了无意义的结果。

我已将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个元素可能具有特定的id。如果两个或多个元素共享相同的id，则它违反了id属性（IDREF）的DTD规范。

对项目进行分组的更好方法是使用class属性或name属性。如果使用name属性，则document.getElementsByTagName（“thename”）。length返回具有该名称的元素数。

Answer 2

您的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/

Answer 3

我不知道有什么不同，但这有效：

        $(".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 4

嗯，我想我已经弄明白了，问题是你不能拥有多个具有相同ID的项目（即使它们位于代码的不同部分）。尝试这样的事情：

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

尽管如此，还有更好的方法。说http://api.jquery.com/jQuery.data/（。data）或者不是将其存储在类中，而是使用php将其设置为js中的变量（在标题中）。

Answer 5

您的主要问题是您对很多元素使用相同的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 6

您在哪里添加HTML中的“日期”类？点击是绑定到span元素，是你想要的吗？

无法使用jQuery选择器从文本字段中获取有效值

6 个答案: