Javascript选择和选择出现在div中

Question

If anyone could be of assistance with my problem then that would be great! I have my script so far that when you click on one of three anchor links the picture corresponding to that anchor link appears in a DIV, and then on the second selection it appears in the div next to that one, and the same with the third, I am trying to work out how to remove the image from the DIV so I am able to reselect an option and the new selection to be placed in the DIV that is empty....my example only shows 3 selections to choose from but this will be 24 soon.

Also how I can retrieve different information from the database to show in the DIVS and to be to able to submit certain data to the database depending on the selection you choose.

Thanks very much for you time! and any suggestions would be appreciated!.

regards, alistair

<script type="text/javascript" language="javascript">
var pos = 0;
function showPic (whichpic) { 
if (document.getElementById) { 
try {
if ((document.getElementById('placeholder1').src+
document.getElementById('placeholder2').src+
document.getElementById('placeholder3').src).search(whichpic.href) > -1)
throw "blah";
document.getElementById('placeholder'+ ++pos).src = whichpic.href;
//document.getElementById('placeholder2').src = whichpic.href;
//document.getElementById('placeholder3').src = whichpic.href;
if (whichpic.title) { 
document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
} else { 
document.getElementById('desc').childNodes[0].nodeValue =           whichpic.childNodes[0].nodeValue; 
}
return false; 
} catch(e) {
alert("u mad?");
return false;
}
} else { 
return true; 
}
}
</script>

<div style="border: 1px solid #999; padding: 1em; margin: 0 0 15px 0;">
<ul>
<li><a onclick="return showPic(this)" href="http://jsfiddle.net/img/ico-add-       resource.png" title="img 1">img 1</a></li>
<li><a onclick="return showPic(this)" href="http://jsfiddle.net/img/info-close.png"      title="img 2">img 2</a></li>
<li><a onclick="return showPic(this)" href="http://jsfiddle.net/img/keys.png"  title="img    3">img 3</a></li>
</ul>

<p id="desc">Choose an image to begin</p>
<img id="placeholder1" src="http://jsfiddle.net/img/shadow.gif" alt="" />
<img id="placeholder2" src="http://jsfiddle.net/img/shadow.gif" alt="" />
<img id="placeholder3" src="http://jsfiddle.net/img/shadow.gif" alt="" />
</div>

Answer 1

Looking at your code, I see that you declare a variable pos and initialize it to 0. Then, each time the user clicks to display a picture, pos is read to see how many pictures are displayed and then find the id of the element where the next picture is displayed. Finally, you increment pos.

If you want to be able to remove pictures so that the user can select new ones, then you'll need to use a more sophisticated sytem. pos, a number, can be used to tell how many pictures that user has displayed, but if the user begins to remove pictures, pos cannot tell you which ones.

I would suggest that you use an array to tell which elements have pictures displayed in them.

var display = [ false, false, false ];

When the user displays a picture in placeholderX, do

display[X] = true.

When the user removes the picture from placeholderX, do

display[X] = false.

When the user wants to display a new picture, do something like

var i;
for(i=0; i<=3; i++) {
    if (display[i]==false) {
        showPictureAtElement('placeholder' + i.toString());
        display[i]=true;
        break;
    {
}

Does that help?