Question

我有这个HTML代码：

<div id="jiraTicketAccordion">
 <div>
   <h3><a href="#">key</a></h3>
   <div>
     <form>
        <div id="jiraTable">
      <table>
        <tr>
           <td class="label"><label for="arrival">ARRIVAL :</label></td>

           <td><input type="text" name="arrival" class="arrival"  
                     onblur="checkTime(this.value);"/></td>

           <td class="label"><label for="newarrival">NEW ARRIVAL :</label></td>

          <td><input type="text" name="newarrival" class="arrival"  
                     onblur="checkTime(this.value);"/></td>

        </tr>
      </table>
     </form>
    </div>
  </div>
</div><!-- end of accordion div -->

正如您所看到的，我在该输入框中为checkTime事件设置了javascript函数onblur()。

之前我有一个带有唯一ID的文本框，因此我使用document.getElementById在我的javascript函数中访问它。

但是现在因为有许多手风琴具有相同的结构，所以我不想使用唯一的ID，因为可能有很多。

所以现在我有一个类用于需要验证的所有文本框。

但是现在我必须在我使用document.getElementById的地方更改我的javascript函数。

我知道我们可以在jquery中按类选择元素，我也尝试过，但没有得到所需的结果。

这是我在jquery中尝试过的：

function checkTime(dateTime){
    alert("inside  check time");
    var errorMsg="";
    regex = /^(\d{2})\/(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\/\d{2} \d{2}:\d{2} [AP]M$/;
    if(dateTime != ''){
    if(!regex.test(dateTime)){
             errorMsg = "Please enter date and time in the format: \n dd/MMM/YY HH:MM AM/PM";
         alert(errorMsg);   
    //how to make the element that called this function to 
    //blank value it it failed validation
    }
     }
}

我想访问调用此方法的元素，以便我可以操作该文本框值而且我想在checkDate函数中以同一手风琴的形式逐个访问其他元素。

我不知道如何使文本框vaalue空白它验证失败。

早些时候，当我有身份证时，我这样做是：

document.getElementById('arrival').value='';

Answer 1

当前代码的最短路径只是传递元素而不是值：

onblur="checkTime(this);"

然后在你的功能上：

function checkTime(el){
    var dateTime = el.value;
    // rest of function
}

就个人而言，我会避免使用onblur="..."之类的内联事件处理程序，并使用addEventListener直接从JavaScript绑定处理程序。这将进一步推动逻辑，结构和表现的分离。

通过调用方法的类访问元素与onblur事件绑定

1 个答案: