jQuery选择器 – 仅将值插入所选的id

我的表格有很多输入。 在JavaScript中我有开放模态窗口的脚本并选择选项。

$("input[id^='field'][id$='A']").on('click', function() { $("#bg").fadeIn(400, function() { $("#modal").fadeIn(400); }); }); $("#modal img").on('click', function() { var text = $(this).siblings('.descr').text(); $("#modal").fadeOut(400, function() { $("#bg").fadeOut(400, function() { $("input[id^='field'][id$='A']").val(text); }); }); }); 

（代码段下方的完整代码）

如何编辑此选择器，仅将所选值插入我单击的输入？

 input[id^='field'][id$='A'] 

每个ID都是唯一的。

 $("input[id^='field'][id$='A']").on('click', function() { $("#bg").fadeIn(400, function() { $("#modal").fadeIn(400); }); }); $("#modal img").on('click', function() { var text = $(this).siblings('.descr').text(); $("#modal").fadeOut(400, function() { $("#bg").fadeOut(400, function() { $("input[id^='field'][id$='A']").val(text); }); }); }); $("input[id^='field'][id$='B']").on('click', function() { $("#bgB").fadeIn(400, function() { $("#modalB").fadeIn(400); }); }); $("#modalB img").on('click', function() { var text = $(this).siblings('.descr').text(); $("#modalB").fadeOut(400, function() { $("#bgB").fadeOut(400, function() { $("input[id^='field'][id$='B']").val(text); }); }); }); 

 .field {margin: 10px;} #bg {position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,0.5); left: 0; top: 0; display: none;} #modal {position: absolute; height: 300px; width: 600px; top: 50%; left: 50%; margin-top: -150px; margin-left: -300px; background: #fff; display: none;} #modal div {display: inline-block;} #modal img {height; 180px; width: 180px; opacity: 0.8; cursor: pointer; } #modal img:hover {opacity: 1;} #bgB {position: fixed; height: 100%; width: 100%; background: rgba(0,0,0,0.5); left: 0; top: 0; display: none;} #modalB {position: absolute; height: 300px; width: 600px; top: 50%; left: 50%; margin-top: -150px; margin-left: -300px; background: #fff; display: none;} #modalB div {display: inline-block;} #modalB img {height; 180px; width: 180px; opacity: 0.8; cursor: pointer; } #modalB img:hover {opacity: 1;} .descr {position: relative; width: 180px; padding: 0 0 0 70px ;} 

  1A  
 1B  
 2A  
 2B  
 3A  
 3B  
 
 
Select an animal !
 

 
 
 cat 
 
 
 dog 
 
 
 cow 
 
 
 
 
Select an animal !
 

 
 
 cat 
 
 
 dog 
 
 
 cow 
  

谢谢

Answer 1

您可以将id存储在变量中。 打开模型后设置它，并在设置值时使用它。

 var inputAId = ""; $("input[id^='field'][id$='A']").on('click', function() { // Set it here... inputAId = this.id; $("#bg").fadeIn(400, function() { $("#modal").fadeIn(400); }); }); $("#modal img").on('click', function() { var text = $(this).siblings('.descr').text(); $("#modal").fadeOut(400, function() { $("#bg").fadeOut(400, function() { // Later use it here... $("#" + inputAId).val(text); }); }); }); 

更新小提琴

Answer 2

存储对jQuery包装元素的引用：

 var $theTarget; $("input[id^='field'][id$='A']").on('click', function() { $theTarget = $(this); $("#bg").fadeIn(400, function() { $("#modal").fadeIn(400); }); }); $("input[id^='field'][id$='B']").on('click', function() { $theTarget = $(this); $("#bgB").fadeIn(400, function() { $("#modalB").fadeIn(400); }); }); $("#modal img").on('click', function() { var text = $(this).siblings('.descr').text(); $("#modal").fadeOut(400, function() { $("#bg").fadeOut(400, function() { $theTarget.val(text); }); }); }); $("#modalB img").on('click', function() { var text = $(this).siblings('.descr').text(); $("#modalB").fadeOut(400, function() { $("#bgB").fadeOut(400, function() { $theTarget.val(text); }); }); }); 

 .field { margin: 10px; } #bg { position: fixed; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; display: none; } #modal { position: absolute; height: 300px; width: 600px; top: 50%; left: 50%; margin-top: -150px; margin-left: -300px; background: #fff; display: none; } #modal div { display: inline-block; } #modal img { height; 180px; width: 180px; opacity: 0.8; cursor: pointer; } #modal img:hover { opacity: 1; } #bgB { position: fixed; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; display: none; } #modalB { position: absolute; height: 300px; width: 600px; top: 50%; left: 50%; margin-top: -150px; margin-left: -300px; background: #fff; display: none; } #modalB div { display: inline-block; } #modalB img { height; 180px; width: 180px; opacity: 0.8; cursor: pointer; } #modalB img:hover { opacity: 1; } .descr { position: relative; width: 180px; padding: 0 0 0 70px; } 

  1A  
 1B  
 2A  
 2B  
 3A  
 3B  
 
 
Select an animal !
 

 
 
 cat 
 
 
 dog 
 
 
 cow 
 
 
 
 
Select an animal !
 

 
 
 cat 
 
 
 dog 
 
 
 cow 
  

Answer 3

在我看来，这更优雅

 $(".field").on('click', function() { $("#modal img").data("currID", this.id); $("#bg").fadeIn(400, function() { $("#modal").fadeIn(400); }); }); $("#modal img").on('click', function() { var text = $(this).siblings('.descr').text(), inputAId = $(this).data("currID"); console.log(inputAId) $("#modal").fadeOut(400, function() { $("#bg").fadeOut(400, function() { $("#" + inputAId).val(text); $("#modal img").data("currID", ""); }); }); }); 

 .field { margin: 10px; } #bg { position: fixed; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; display: none; } #modal { position: absolute; height: 300px; width: 600px; top: 50%; left: 50%; margin-top: -150px; margin-left: -300px; background: #fff; display: none; } #modal div { display: inline-block; } #modal img { height; 180px; width: 180px; opacity: 0.8; cursor: pointer; } #modal img:hover { opacity: 1; } #bgB { position: fixed; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5); left: 0; top: 0; display: none; } #modalB { position: absolute; height: 300px; width: 600px; top: 50%; left: 50%; margin-top: -150px; margin-left: -300px; background: #fff; display: none; } #modalB div { display: inline-block; } #modalB img { height; 180px; width: 180px; opacity: 0.8; cursor: pointer; } #modalB img:hover { opacity: 1; } .descr { position: relative; width: 180px; padding: 0 0 0 70px; } 

  1A  
 1B  
 2A  
 2B  
 3A  
 3B  
 
 
Select an animal !
 

 
 
 cat 
 
 
 dog 
 
 
 cow