使用jQuery選擇器無法從文本字段獲取有效值

我想從文本字段中獲取一些值，這些值表示日期，並且由年，月和日三部分組成。有兩個這樣的日期，first和last日期，他們一起形成'邊界'來限制搜索。使用jQuery選擇器無法從文本字段獲取有效值

當我在下面的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>

來源

2011-06-26 Ankur

Firebug控制檯顯示「propertyId未定義」。 –

對不起，我沒有粘貼我的代碼。 – Ankur

不止一次使用相同的ID在HTML中無效，只會給出不正確的結果（'getElementById（）'只會返回一個元素）。改用類。 – kapa

你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/

來源

2011-06-26 07:22:42

實際上，我可能會明確需要傳入dateValueElement並傳入propertyId，現在就嘗試。 – Ankur

只是一個想法（我從來沒有使用過濾器之前），但它似乎不是一個更好的適合使用查找，而是過濾器似乎允許多個選擇（所以也許過濾器輸出一個數組？），而查找只會允許一個。 – Ben

是的，的確如此。 –

技術上，只在1元件可以具有特定的標識。如果兩個或多個元素共享相同的ID，那麼它違反了ID屬性（IDREF）的DTD規範。

將項目分組的更好方法是通過class屬性或name屬性。如果使用name屬性，那麼document.getElementsByTagName（「thename」）.length將返回具有該名稱的元素的數量。

來源

2011-06-26 07:28:32

謝謝，這是有用的知道。我會通過 – Ankur

更改它不僅僅是'getElementsByName' HTML5嗎？只要ID是獨一無二的，就可以使用。選擇的每種類型的類都可以工作。 –

謝謝賈裏德這是一個錯字 –

我不知道有什麼區別，但這個工作：

 $(".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); 
}

來源

2011-06-26 07:36:18 Ankur

你只是從你傳入的dateElement中獲得id。這與在點擊處理程序中從dateElement獲取id後傳入id相同。 –

哼，想我想通了，問題是，你不能有相同ID的多個項目（甚至如果他們在代碼的不同部分）。嘗試是這樣的：

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

雖然，也有這樣做的更好的方法。說http://api.jquery.com/jQuery.data/（.data）或者，而不是將其存儲在類中，使用php將其設置爲js中的變量（在標題中）。

來源

2011-06-26 07:45:22 Ben

您的主要問題是，您對很多元素使用相同的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); 

}

來源

2011-06-26 07:46:13 Guffa

你在哪裏添加e類'日期'在HTML中？點擊被綁定到span元素，是你想要的嗎？

來源

2011-06-26 09:34:50

使用jQuery選擇器無法從文本字段獲取有效值

回答

相關問題