jQueryセレクタを使用してテキストフィールドから有効な値を取得できません

Question

テキストフィールドから値を取得したい、これらの値は日付を表し、年、月、日の3つの部分で構成されます。そのような日付は、firstとlastの2つの日付があり、一緒に検索を制限するために「境界」を形成します。

以下のjs/jqueryを下のHTMLで使用すると、ナンセンスの結果が得られます。

私はここJsfiddleにhttp://jsfiddle.net/grHEY/

をHTMLとJSを入れて、同様以下のコードをコピーしました。

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

あなたpropertyIdはグローバルスコープではありません。しかし、私はあなたがグローバルスコープでそれを使用する必要はないと思います。なぜあなたはこれをしないのですか？

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

Answer 2

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

} 

は技術的には、高々1要素は、特定のIDを有していてもよいです。 2つ以上の要素が同じidを共有する場合、それはid属性（IDREF）のDTD仕様に違反しています。

アイテムをグループ化するより良い方法は、class属性またはname属性のいずれかです。 name属性を使用すると、document.getElementsByTagName（ "thename"）。lengthはその名前の要素の数を返します。

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/

もののを、それを行うためのより良い方法があります。 Say 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

ここでは、 eクラス 'date'はHTMLにありますか？クリックはスパン要素にバインドされています。