我在我的页面上为 3 个不同的 textarea 设置了 3 个不同的 jQuery 函数。它应该工作的方式是您从一些选项中进行选择，然后您选择的选项应该填充到该选项的文本区域中。问题是它会将您所做的任何选择填充到所有 3 个文本区域中。这是 jsFiddle 的链接，如果有人可以多加一双眼睛告诉我我缺少什么，我将不胜感激。
HTML
<div>Sale Locations</div>
<TEXTAREA NAME="saleLocation" col="30" ROWS="4" ID="saleLocation"></TEXTAREA>
<INPUT NAME="saleLocation_required" TYPE="hidden" VALUE="You cannot leave the field (Sale Location) empty.">
<div style="text-align:right; padding-right:10px;"><span class="icon-location-arrow icon-large"></span> <span id="SaleLocationsLink" style="color:red;">choose a location</span> </div>
<div id="SaleLocationsDiv" style="background-color:#fff; border:1px dotted black; padding:8px 3px;">
<div style="padding:2px 0px;">
<pre><a href="./" class="SlidedownChoices">Jane Doe
P.O. Box 384
Acme, BB 666666</a></pre>
</div>
<div style="padding:2px 0px;">
<pre><a href="./" class="SlidedownChoices">Joe Blow
123 Main St
Someplace, AA 55555</a></pre>
</div>
</div>
<div>Terms Conditions...</div>
<TEXTAREA NAME="termsConditions" ID="termsConditions" ROWS="5"></TEXTAREA>
<div style="text-align:right; padding-right:10px;"><span class="icon-location-arrow icon-large"></span> <span id="SalesTermsLink" style="color:red;">choose terms/conditions</span> </div>
<div id="SalesTermsDiv" style="background-color:#fff; border:1px dotted black; padding:8px 3px;">
<div style="padding:2px 0px;">
<pre><a href="./" class="SlidedownChoices">Net30</a></pre>
</div>
<div style="padding:2px 0px;">
<pre><a href="./" class="SlidedownChoices">Cash Only</a></pre>
</div>
<div style="padding:2px 0px;">
<pre><a href="./" class="SlidedownChoices">Net15</a></pre>
</div>
</div>
<div>Contact...</div>
<TEXTAREA NAME="contact" id="contact" ROWS="5"></TEXTAREA>
<div style="text-align:right; padding-right:10px;"><span class="icon-location-arrow icon-large"></span> <span id="ContactInformationLink" style="color:red;">choose contact information</span></div>
<div id="ContactInformationDiv" style="background-color:#fff; border:1px dotted black; padding:8px 3px;">
<div style="padding:2px 0px;">
<pre><a href="./" class="SlidedownChoices">Mary Jane
P.O. Box 69
Up High, NY 90210</a></pre>
</div>
</div>
JAVASCRIPT
//code for slide down choices
//code for Sale Locations Slide Down
if ($("#SaleLocationsDiv").length) { //does the div exist on the page
$("#SaleLocationsDiv").hide(); //hide the div if it is not already
$("#SaleLocationsLink").click(function () {
if ($("#SaleLocationsDiv").is(":hidden")) { //if the div is hidden then slide it down and change text
$("#SaleLocationsDiv").slideDown("slow");
$("#SaleLocationsLink").html("hide sale locations");
} else { //if it is not hidden then hide it and change the text back
$("#SaleLocationsDiv").slideUp("slow");
$("#SaleLocationsLink").html("choose a location");
}
});
//code to add the location to the text area box
$("a.SlidedownChoices").click(function (e) {
//e is short for event
e.preventDefault(); //prevent the click event from going to a url
//You want to append the text of the anchor link into the textarea.
var innerTxt = $(this).text();
//need to trim whitespace from the string
innerTxt = $.trim(innerTxt);
var $obj = $("#saleLocation"); //replace this with textarea selector
$obj.val($obj.val() + '\n' + innerTxt + '\n');
//reset the sale locations slider
$("#SaleLocationsDiv").slideUp("slow");
$("#SaleLocationsLink").html("choose a location");
});
}
//code for Terms and Conditions Slide Down
if ($("#SalesTermsDiv").length) { //does the div exist on the page
$("#SalesTermsDiv").hide(); //hide the div if it is not already
$("#SalesTermsLink").click(function () {
if ($("#SalesTermsDiv").is(":hidden")) { //if the div is hidden then slide it down and change text
$("#SalesTermsDiv").slideDown("slow");
$("#SalesTermsLink").html("hide terms/conditions");
} else { //if it is not hidden then hide it and change the text back
$("#SalesTermsDiv").slideUp("slow");
$("#SalesTermsLink").html("choose terms/conditions");
}
});
//code to add the terms to the text area box
$("a.SlidedownChoices").click(function (e) {
//e is short for event
e.preventDefault(); //prevent the click event from going to a url
//You want to append the text of the anchor link into the textarea.
var innerTxt = $(this).text();
//need to trim whitespace from the string
innerTxt = $.trim(innerTxt);
var $obj = $("#termsConditions"); //replace this with textarea selector
$obj.val($obj.val() + '\n' + innerTxt + '\n');
//reset the sale locations slider
$("#SalesTermsDiv").slideUp("slow");
$("#SalesTermsLink").html("choose terms/conditions");
});
}
//code for Contact Information Slide Down
if ($("#ContactInformationDiv").length) { //does the div exist on the page
$("#ContactInformationDiv").hide(); //hide the div if it is not already
$("#ContactInformationLink").click(function () {
if ($("#ContactInformationDiv").is(":hidden")) { //if the div is hidden then slide it down and change text
$("#ContactInformationDiv").slideDown("slow");
$("#ContactInformationLink").html("hide contact information");
} else { //if it is not hidden then hide it and change the text back
$("#ContactInformationDiv").slideUp("slow");
$("#ContactInformationLink").html("choose contact information");
}
});
//code to add the terms to the text area box
$("a.SlidedownChoices").click(function (e) {
//e is short for event
e.preventDefault(); //prevent the click event from going to a url
//You want to append the text of the anchor link into the textarea.
var innerTxt = $(this).text();
//need to trim whitespace from the string
innerTxt = $.trim(innerTxt);
var $obj = $("#contact"); //replace this with textarea selector
$obj.val($obj.val() + '\n' + innerTxt + '\n');
//reset the sale locations slider
$("#ContactInformationDiv").slideUp("slow");
$("#ContactInformationLink").html("choose contact information");
});
}
//end code for slide down choices