jQuery选择器-仅将值插入选定的ID

Question

I have form with many inputs. And in JavaScript I have script for open modal window and choose options.

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

(Full code below in the snippet)

How can I edit this selector, to inserting chosen value only to input which I clicked?

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

Every ID is unique.

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 1A <input type="text" class="field" id="field1A" /> <br> 1B <input type="text" class="field" id="field1B" /> <br> 2A <input type="text" class="field" id="field2A" /> <br> 2B <input type="text" class="field" id="field2B" /> <br> 3A <input type="text" class="field" id="field3A" /> <br> 3B <input type="text" class="field" id="field3B" /> <div id="bg"></div> <div id="modal"> <div>Select an animal !</div> <br><br> <div> <img src="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br> <span class="descr">cat</span> </div> <div> <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br> <span class="descr">dog</span> </div> <div> <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br> <span class="descr">cow</span> </div> </div> <div id="bgB"></div> <div id="modalB"> <div>Select an animal !</div> <br><br> <div> <img src="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br> <span class="descr">cat</span> </div> <div> <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br> <span class="descr">dog</span> </div> <div> <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br> <span class="descr">cow</span> </div> </div> 

Thanks

Answer 1

You can store the id in a variable. Set it once you open the model and use it when you are setting the value.

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);
    });
  });
});

Updated fiddle

Answer 2

Store a reference to the jQuery wrapped element:

 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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 1A <input type="text" class="field" id="field1A" /> <br> 1B <input type="text" class="field" id="field1B" /> <br> 2A <input type="text" class="field" id="field2A" /> <br> 2B <input type="text" class="field" id="field2B" /> <br> 3A <input type="text" class="field" id="field3A" /> <br> 3B <input type="text" class="field" id="field3B" /> <div id="bg"></div> <div id="modal"> <div>Select an animal !</div> <br><br> <div> <img src="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br> <span class="descr">cat</span> </div> <div> <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br> <span class="descr">dog</span> </div> <div> <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br> <span class="descr">cow</span> </div> </div> <div id="bgB"></div> <div id="modalB"> <div>Select an animal !</div> <br><br> <div> <img src="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br> <span class="descr">cat</span> </div> <div> <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br> <span class="descr">dog</span> </div> <div> <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br> <span class="descr">cow</span> </div> </div> 

Answer 3

This is more elegant in my opinion

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 1A <input type="text" class="field" id="field1A" /> <br> 1B <input type="text" class="field" id="field1B" /> <br> 2A <input type="text" class="field" id="field2A" /> <br> 2B <input type="text" class="field" id="field2B" /> <br> 3A <input type="text" class="field" id="field3A" /> <br> 3B <input type="text" class="field" id="field3B" /> <div id="bg"></div> <div id="modal"> <div>Select an animal !</div> <br><br> <div> <img src="https://www.petmd.com/sites/default/files/petmd-cat-happy.jpg" /><br> <span class="descr">cat</span> </div> <div> <img src="https://www.what-dog.net/Images/faces2/main009.jpg" /><br> <span class="descr">dog</span> </div> <div> <img src="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br> <span class="descr">cow</span> </div> </div>