javascript - 如何捕获用户从此幻灯片中选择的图像的 'alt' 属性？

Question

如何修改此脚本以捕获用户在幻灯片中选择的图像的“alt”属性？

此代码显示一系列 20 对图像，并要求用户选择他们的偏好。每次用户单击其中一个“选择”按钮时，“manipulateDOM()”函数都会前进到文本和图像数组中的下一组项目。但是，由于它没有设置为典型的表单字段，因此我很难弄清楚如何捕获每个选择的值，以便可以将其与其余表单值一起提交到数据库。

我尝试使用 click() 方法创建一个函数来(至少)捕获 src 值，但我无法获得正确的语法，以便它可以与“manipulateDOM()”函数结合运行。我也更愿意捕获“alt”属性，但我不知道如何做到这一点。

我正在尝试的功能:

 $(document).ready(function () {
     $("#buttons").click(function () {           
         var imgvalue = $("#imgtrendy").attr("src");
         $("#picval").text(imgvalue);
         document.write(imgvalue + ', ');
     });
 });

现有代码:

Javascript-manipulateDOM()和manipulateDOM1()函数

 var NumberOfImages = 3 - 1; //-1 because array members starts from 0
 var trendy = new Array(NumberOfImages);
 trendy[0] = "files/set1/A1.jpg"; 
 trendy[1] = "files/set1/B1.jpg"; 
 trendy[2] = "files/set1/C1.jpg";
 var imgNumber = 1; //array key of current image

 var NumberOfImages = 3 - 1;
 var classic = new Array(NumberOfImages);
 classic[0] = "files/set1/A2.png"; 
 classic[1] = "files/set1/B2.jpg"; 
 classic[2] = "files/set1/C2.jpg";
 var classicNumber = 1;

 var text = 3 - 1;
 var text = new Array;
 text[0] = "Which would you be more likely to wear?"
 text[1] = "Which look is more you?"
 text[2] = "Which would you rather wear?"
 var textNumber = 1;   

function manipulateDOM() {
     changeObjects();
     NextImage();
 }
 function changeObjects() {
     document.getElementById("question").innerHTML = text[textNumber];     
 }   
 function NextImage() {
     if (imgNumber < NumberOfImages) //Stop moving forward when we are out of images
     {
         imgNumber++;
         document.images["taste"].src = trendy[imgNumber];
         document.images["taste1"].src = classic[imgNumber];
         textNumber++;  
         document.getElementById["question"].innerHTML = text[textNumber];
         document.getElementById["selectButton"].innerHTML = text[textNumber];
     }   
 }    
 function manipulateDOM1() {
     changeObjects();
     NextImage1();
 }
 function NextImage1() {
     if (imgNumber < NumberOfImages)
     {
         imgNumber++;
         document.images["taste"].src = trendy[imgNumber];
         document.images["taste1"].src = classic[imgNumber];
         textNumber++;  
         document.getElementById["question"].innerHTML = text[textNumber];
         document.getElementById["selectButton"].innerHTML = text[textNumber];
     } 
 } 

HTML

<form id="taste" name="taste" method="post" action="taste-exec.php" >
<h2 id="question"> Which would you be more likely to wear?</h2>
<table><tr>
   <td><img id="imgtrendy" src="files/set1/A1.jpg" name="taste" value="trendy[1]" /></td>
   <td><img id="imgclassic" src="files/set1/A2.png" name="taste1" value="classic[1]"  /></td></tr>
<tr id="buttons">
   <td><img id="trendyButton" alt"Select" src="files/Select.jpg" onclick="javascript:manipulateDOM()"></td>
   <td ><img id="classicButton" alt"Select" src="files/Select.jpg" onclick="javascript:manipulateDOM1()"></td> 
</tr><tr>
   <td id="picval"></td>
   <td><input name="answer" id="answer" type="text" /></td>
</tr></table>
</form>  

Answer 1

您还可以使用 attr 方法和 alt 作为参数来获取 alt 属性，就像您已经使用 src 所做的那样。您可以尝试:

 function changeObjects() {
     document.getElementById("question").innerHTML = text[textNumber];     

     var imgvalue = $("#imgtrendy").attr("alt");
     $("#picval").text(imgvalue);
 }   

编辑:将数据保存在一个数组中的示例

//to save it
var alt = $("#imgtrendy").attr("alt");
var fileName= 'someValue';//populate accordingly
var myArray[index] = alt + '|' + fileName;
//to retrieve it
var bothValues = myArray[index].split('|'); //gives you an array
alt = bothValues[0] //contains alt at index 0
fileName = bothValues[1] //contains fileName at index 1