1

このスクリプトを変更して、ユーザーがスライドショーで選択した画像の「alt」属性を取得するにはどうすればよいですか?

このコードは、一連の 20 組の画像を表示し、ユーザーに好みを選択するように求めます。ユーザーが「選択」ボタンの 1 つをクリックするたびに、「manipulateDOM()」関数はテキスト配列と画像配列内の次の項目セットに進みます。ただし、典型的なフォーム フィールドとして設定されていないため、残りのフォーム値と共にデータベースに送信できるように、各選択の値を取得する方法を理解するのに苦労しています。

（少なくとも）src値をキャプチャするためにclick（）メソッドを使用して関数を作成しようとしましたが、「manipulateDOM（）」関数と組み合わせて実行できるように構文を正しく取得できません。「alt」属性もキャプチャしたいのですが、その方法がわかりませんでした。

私が実験していた機能：

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

既存のコード:

Javascript - マニフェストDOM() およびマニピュレートDOM1() 関数

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

1 に答える 1

1

すでに で行っているように、attrメソッドとパラメーターとしても使用して alt 属性を取得します。あなたは試すことができます：altsrc

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

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

編集：データを1つの配列に保持する例

//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
于 2013-01-16T16:59:55.093 に答える