Question

我有一个Jquery代码，会弹出一个框，上面写着＆＃34;今天＆＃34;仅当用户关注输入字段时。当用户单击该框时，这将使用当前日期填充目标输入字段。目前我的代码正在运行，但问题如下：

问题：当有人点击“今天”按钮时，它会填充页面上的所有输入字段，而不是正在关注的输入。

我创建了一个JSFiddle来为您提供我网站结构的最佳表示，并让您了解发生了什么。我最近还在与Jquery学习很多，但这让我很难过。我尝试使用$("input[id*=Next_Update]").val(now);来定位输入本身，但这只会破坏代码。

以下是我的代码与JSfiddle的快速示例 JSFiddle：https://jsfiddle.net/s68zhLxn/26/

$(document).ready(function() {
    $(".im_whiteboard [id*=Next_Update]").on('focusin', function() {
        var div = $('#now');
        var top = $('input').offset().top + $('input').height() + 5;
        var left = $('input').offset().left;
        $(div).css('top', top);
        $(div).css('left', left);
        $(div).fadeIn();
    });
    $('input').on('focusout', function() {
        $('#now').fadeOut();
    });
    $('#now').on('click', function() {
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();

        if(dd<10) {
            dd='0'+dd
        } 

        if(mm<10) {
            mm='0'+mm
        } 

        today = mm+'/'+dd+'/'+yyyy;
       $('input').val(today); 
    });
});

对此我表示感谢。

Answer 1

很少有亮点：

您的代码无法正常工作，因为$('input')选择器将查找并修改所有现有DOM输入。此外，覆盖<div>上的点击事件会导致当前输入失去焦点。
此外，您有多个与now具有相同ID的元素。把它改成上课。
由于您的每个<td>都有input + now，siblings()，next()/prev()会帮助您获取当前的输入元素。< / p>

<td id="customEdit2_1_Next_Update_1c">
     <input id="customEditInput_1_Next_Update_1" type='text'/>
     <div class='now'>Today</div>    
     <!--here siblings will help you get the required `input`-->
</td>

使用

var div = $(this).siblings('.now');  //or if you have multiple inputs under one <tr> use $(this).closest('td').find('.now');

在分配值时使用，

$(this).siblings('input').val(today);

<强> Updated Fiddle

运行下面的实时代码段。

$(document).ready(function() {
    $(".im_whiteboard [id*=Next_Update]").on('focusin', function() {
        var div = $(this).siblings('.now');
        var top = $('input').offset().top + $('input').height() + 5;
        var left = $('input').offset().left;
        $(div).css('top', top);
        $(div).css('left', left);
        $(div).fadeIn();
    });
    $('input').on('focusout', function() {
        $('.now').fadeOut();
    });
    $('.now').on('click', function() {
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();
        
        if(dd<10) {
            dd='0'+dd
        } 
        
        if(mm<10) {
            mm='0'+mm
        } 
        
        today = mm+'/'+dd+'/'+yyyy;
       $(this).siblings('input').val(today); 
    });
});

.now {
    top: 0;
    left: 0;
    display: none;
    position: absolute;
    background: #eee;
    color: tomato;
    border-radius: 2px;
    padding: 10px 20px;   
}
.now:hover {
    cursor: pointer; 
    background: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="im_whiteboard">
    <tr>
        <td id="customEdit2_1_Next_Update_1c">
            <input id="customEditInput_1_Next_Update_1" type='text'/>
            <div class='now'>Today</div>
        </td>
    </tr>
    
        <tr>
        <td id="customEdit2_1_Next_Update_2">
            <input id="customEditInput_1_Next_Update_2" type='text'/>
            <div class='now'>Today</div>
        </td>
    </tr>
    
    <tr>
        <td id="customEdit2_1_Next_Update_3">
             <input id="customEditInput_1_Next_Update_3" type='text'/>
            <div class='now'>Today</div>
        </td>
    </tr>
</table>

Answer 2

我更新了你的小提琴：https://jsfiddle.net/seadonk/s68zhLxn/27/

在焦点事件处理函数中应用click函数。在此功能中，您可以访问这个＆＃39;例如：var self = $（this），您可以使用它来设置值。

private void GetIndexes()
{
    SelectRowIndexes = gridViewRecords.Rows
        .Cast<DataRowView>()
        .Select(drv => (int) drv.Row["ResourceAndInstallKey"])
        .ToList();
}

Answer 3

您应该为now元素使用类而不是id，因为ID必须是唯一的。然后，您可以使用DOM遍历方法来查找相关的输入元素。

＆＃13;

$(document).ready(function() {
  $(".im_whiteboard [id*=Next_Update]").on('focusin', function() {
    var div = $(this).closest("tr").find('.now');
    var top = $(this).offset().top + $('input').height() + 5;
    var left = $(this).offset().left;
    $(div).css('top', top);
    $(div).css('left', left);
    $(div).fadeIn();
  });
  $('input').on('focusout', function() {
    $('.now').fadeOut();
  });
  $('.now').on('click', function() {
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //January is 0!
    var yyyy = today.getFullYear();

    if (dd < 10) {
      dd = '0' + dd
    }

    if (mm < 10) {
      mm = '0' + mm
    }

    today = mm + '/' + dd + '/' + yyyy;
    $(this).closest("tr").find('input').val(today);
  });
});

＆＃13;

.now {
  top: 0;
  left: 0;
  display: none;
  position: absolute;
  background: #eee;
  color: tomato;
  border-radius: 2px;
  padding: 10px 20px;
}
.now:hover {
  cursor: pointer;
  background: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="im_whiteboard">
  <tr>
    <td id="customEdit2_1_Next_Update_1c">
      <input id="customEditInput_1_Next_Update_1" type='text' />
      <div class='now'>Today</div>
    </td>
  </tr>

  <tr>
    <td id="customEdit2_1_Next_Update_2">
      <input id="customEditInput_1_Next_Update_2" type='text' />
      <div class='now'>Today</div>
    </td>
  </tr>

  <tr>
    <td id="customEdit2_1_Next_Update_3">
      <input id="customEditInput_1_Next_Update_3" type='text' />
      <div class='now'>Today</div>
    </td>
  </tr>
</table>

＆＃13;

Answer 4

$(something) - 在JQuery中总是呈现适合该内容的所有元素的集合，称为选择器。在您的情况下$('input') - 显示所有输入和方法.val(val)应用于所有输入，您可以通过某些方法减少收集，例如.eq(index)或.first()或{{1对于ex：`$（'input'）。eq（0）.val（'val'）

但更好的是，更精确的是css选择器非常有用，还有一堆特殊的JQuery选择器。

.last()

在focusin处理程序中用$（this）替换$（'input'） - 表示元素trigered事件并保持输入包含在全局范围（或您喜欢的任何存储）中，然后在onclick处理程序中为该存储元素赋值

Answer 5

我重写了一堆它来摆脱你的多个ID并简化你的代码。 https://jsfiddle.net/s68zhLxn/32/

$(document).ready(function() {
    $(".im_whiteboard [id*=Next_Update]").on('focusin', function() {
        var self = $(this);
        var div = self.siblings('.now');
        var top = self.offset().top + self.height() + 5;
        var left = self.offset().left;
        div.css('top', top);
        div.css('left', left);
        div.fadeIn();
    });
    $('input').on('focusout', function() {
        $('.now').fadeOut();
    });
    $('.now').on('click', function() {
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();

        if(dd<10) {
            dd='0'+dd
        } 

        if(mm<10) {
            mm='0'+mm
        } 

        today = mm+'/'+dd+'/'+yyyy;
       $(this).siblings('input').val(today); 
    });
});

Answer 6

我是应用课程的粉丝： JsFiddle

更新此部分：

$('input').on('focusout', function() {
    $('.js-input-last-focused').removeClass('js-input-last-focused');
    $(this).addClass('js-input-last-focused');
    $('#now').fadeOut();
});

而不是

$('input').val(today);

使用：

$('.js-input-last-focused').val(today);

Answer 7

是的，问题来自你调用div / input元素的方式，它显示调用$（this）范围，而不是所有input或div元素。您也可以使用我的技巧保持#now id。无需将其更改为.now，但为了良好实践，您应该

Bundle

Answer 8

$('input')将在页面上选择所有输入。要仅选择“now”div之前的输入，请更改：

$('input').val(today);

到此：

$(this).prev('input').val(today);

修改这实际上只适用于第一个输入，因为focusin处理程序总是选择第一个今日div（并且正如其他答案所指出的那样，那些今天的div应该真的是class =“now”，如ids应该是唯一的。This fiddle涵盖将要修复的更改。

html：将所有id="now"更改为class="now"，

css：将#now样式选择器更改为.now，

js：在focusin处理程序中将var div = $('#now');更改为var div = $(this).next('.now');，并将$('input').val(today);更改为$(this).prev('input').val(today);，如上所述。

如何动态定位聚焦输入

8 个答案: