Jquery Selector - Inserting Value Only To Selected Id
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').fade
Solution 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);
});
});
});
Solution 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;
}
#modaldiv {
display: inline-block;
}
#modalimg {
height;
180px;
width: 180px;
opacity: 0.8;
cursor: pointer;
}
#modalimg: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;
}
#modalBdiv {
display: inline-block;
}
#modalBimg {
height;
180px;
width: 180px;
opacity: 0.8;
cursor: pointer;
}
#modalBimg:hover {
opacity: 1;
}
.descr {
position: relative;
width: 180px;
padding: 00070px;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1A <inputtype="text"class="field"id="field1A" /><br> 1B <inputtype="text"class="field"id="field1B" /><br> 2A <inputtype="text"class="field"id="field2A" /><br> 2B <inputtype="text"class="field"id="field2B" /><br> 3A <inputtype="text"class="field"id="field3A" /><br> 3B <inputtype="text"class="field"id="field3B" /><divid="bg"></div><divid="modal"><div>Select an animal !</div><br><br><div><imgsrc="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br><spanclass="descr">cat</span></div><div><imgsrc="https://www.what-dog.net/Images/faces2/main009.jpg" /><br><spanclass="descr">dog</span></div><div><imgsrc="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br><spanclass="descr">cow</span></div></div><divid="bgB"></div><divid="modalB"><div>Select an animal !</div><br><br><div><imgsrc="http://www.bestcatanddognutrition.com/wp-content/uploads/2011/06/cat-teeth.jpg" /><br><spanclass="descr">cat</span></div><div><imgsrc="https://www.what-dog.net/Images/faces2/main009.jpg" /><br><spanclass="descr">dog</span></div><div><imgsrc="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br><spanclass="descr">cow</span></div></div>
Solution 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;
}
#modaldiv {
display: inline-block;
}
#modalimg {
height;
180px;
width: 180px;
opacity: 0.8;
cursor: pointer;
}
#modalimg: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;
}
#modalBdiv {
display: inline-block;
}
#modalBimg {
height;
180px;
width: 180px;
opacity: 0.8;
cursor: pointer;
}
#modalBimg:hover {
opacity: 1;
}
.descr {
position: relative;
width: 180px;
padding: 00070px;
}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
1A <inputtype="text"class="field"id="field1A" /><br> 1B <inputtype="text"class="field"id="field1B" /><br> 2A <inputtype="text"class="field"id="field2A" /><br> 2B <inputtype="text"class="field"id="field2B" /><br> 3A <inputtype="text"class="field"id="field3A" /><br> 3B <inputtype="text"class="field"id="field3B" /><divid="bg"></div><divid="modal"><div>Select an animal !</div><br><br><div><imgsrc="https://www.petmd.com/sites/default/files/petmd-cat-happy.jpg" /><br><spanclass="descr">cat</span></div><div><imgsrc="https://www.what-dog.net/Images/faces2/main009.jpg" /><br><spanclass="descr">dog</span></div><div><imgsrc="https://s3.amazonaws.com/objects.artspan.com/member/mbaldwin/500/137411.jpg" /><br><spanclass="descr">cow</span></div></div>
Post a Comment for "Jquery Selector - Inserting Value Only To Selected Id"