私のページには、3 つの異なるテキストエリアに対して 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>
ジャバスクリプト
//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