jQuery选择器-仅将值插入选定的ID [英] jQuery selector - inserting value only to selected id

问题描述

我有很多输入的表格.在JavaScript中，我有用于打开模式窗口的脚本并选择选项.

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)

如何编辑此选择器，以便仅将所选值插入到单击的输入中?

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

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

谢谢

推荐答案

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

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

这篇关于jQuery选择器-仅将值插入选定的ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！