Question

这是我用来编码HTML的代码：

<button id="imageshow" style="display:none">Button1</button>&nbsp;&nbsp;&nbsp;
<button id="imageshow" style="display:none">Button2</button>&nbsp;&nbsp;&nbsp;
<button id="imageshow" style="display:none">Button3</button>&nbsp;&nbsp;&nbsp;<br>
<img src="Images/Image1.jpg" onmouseover="showIt(this.src)"><br>
<button id="imageshow" style="display:none">Button4</button>&nbsp;&nbsp;&nbsp;
<button id="imageshow" style="display:none">Button5</button>&nbsp;&nbsp;&nbsp;
<button id="imageshow" style="display:none">Button6</button>&nbsp;&nbsp;&nbsp;

当我在不使用style =“display：none”的情况下编码时，我可以添加一切。但是当我像上面那样编码并使用下面的javascript：

function showIt(imgsrc)
{
document.getElementById('imageshow').src=imgsrc;
document.getElementById('imageshow').style.display='';
}

function hideIt()
{
document.getElementById('imageshow').style.display='none';
}

只添加了一个按钮。谁能解决这个问题。谢谢

Answer 1

那是因为你只能拥有一个给定身份的元素。

你应该使用类。

请参阅http://jsfiddle.net/mwu4M/

HTML

移除那些丑陋的 和<br />。并使用class="imageshow"代替id="imageshow"。

<button class="imageshow">Button1</button>
<button class="imageshow">Button2</button>
<button class="imageshow">Button3</button>
<img id="myimg" src="Images/Image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()" alt="[IMG]">
<button class="imageshow">Button4</button>
<button class="imageshow">Button5</button>
<button class="imageshow">Button6</button>

CSS：

.imageshow{
    visibility:hidden;
    margin-right:15px;
}
.imageshow.show{
    visibility:visible;
}
#myimg{display:block;}

JavaScript的：

function getElementsByClassName(c,el){
    if(typeof el=='string'){el=document.getElementById(el);}
    if(!el){el=document;}
    if(el.getElementsByClassName){return el.getElementsByClassName(c);}
    var arr=[],
        allEls=el.getElementsByTagName('*');
    for(var i=0;i<allEls.length;i++){
        if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
    }
    return arr;
}
function addClass(el,c){
    var arr=el.className.split(' ');
    if(arr.indexOf(c)>-1){return;}
    arr.push(c);
    el.className=arr.join(' ');
}
function delClass(el,c){
    var arr=el.className.split(' ');
    if(arr.indexOf(c)===-1){return;}
    arr.splice(arr.indexOf(c),1);
    el.className=arr.join(' ');
}
function showIt(imgsrc){
    this.src=imgsrc;
    var els=getElementsByClassName('imageshow');
    for(var i=0;i<els.length;i++){
        addClass(els[i],'show');
    }
}
function hideIt(){
    var els=getElementsByClassName('imageshow');
    for(var i=0;i<els.length;i++){
        delClass(els[i],'show');
    }
}

修改

甚至更好：http://jsfiddle.net/mwu4M/1/

HTML：

<div id="wrapper"> <button class="imageshow">Button1</button> <button class="imageshow">Button2</button> <button class="imageshow">Button3</button> <img id="myimg" src="Images/Image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()" alt="[IMG]"> <button class="imageshow">Button4</button> <button class="imageshow">Button5</button> <button class="imageshow">Button6</button> </div>

CSS：

#wrapper>.imageshow{ visibility:hidden; margin-right:15px; } #wrapper.show>.imageshow{ visibility:visible; } #myimg{display:block;}

JavaScript的：

function showIt(imgsrc){ this.src=imgsrc; document.getElementById('wrapper').className="show"; } function hideIt(){ document.getElementById('wrapper').className=""; }

但我不明白你对src做了什么。

您的代码

document.getElementById('imageshow').src=imgsrc;

但是imageshow是按钮而不是图像！

然后我以为你想改变myimg＆＃39; SRC。

但它没有意义，因为我们将src更改为src !!

<img id="myimg" src="Images/Image1.jpg" onmouseover="showIt(this.src)" onmouseout="hideIt()" alt="[IMG]"> function showIt(imgsrc){ this.src=imgsrc;/*It was "Images/Image1.jpg" and now it's "Images/Image1.jpg" too*/ document.getElementById('wrapper').className="show"; }

编辑2：

如果要在悬停图像时显示按钮并在鼠标转到其他位置时隐藏它们，可以在父级上使用onmouseleave。但是并非所有浏览器都支持它，因此您需要实现它：

function containsOrIs(el1,el2){ if(el1===el2){return true;} return Boolean(el1.compareDocumentPosition(el2)&16); } function addEvent(el,e,f,b){ if(typeof el==='string'){el=document.getElementById(el);} if(e=='mouseenter'||e=='mouseleave'){ return addEvent(el,e=='mouseenter'?'mouseover':'mouseout',function(e){ if(!e){e=window.event;} if((el===e.target || containsOrIs(el, e.target)) && !containsOrIs(el, e.relatedTarget||e[e=='mouseenter'?'fromElement' : 'toElement'])){ f(); } }); } if(el.addEventListener){ if(b==undefined){b=false} return el.addEventListener(e,f,b); } if(el.attachEvent){ return el.attachEvent('on'+e,f); } } function showIt(imgsrc){ this.src=imgsrc; document.getElementById('wrapper').className="show"; } function hideIt(){ document.getElementById('wrapper').className=""; } window.onload=function(){ addEvent('wrapper','mouseleave',hideIt); }

DEMO: http://jsfiddle.net/mwu4M/2/

编辑3 ：

但也许您更喜欢使用:hover，它更简单且仅限CSS：

#wrapper>.imageshow{ visibility:hidden; } #wrapper:hover>.imageshow{ visibility:visible; }

但是当鼠标悬停#wrapper时，按钮将会显示，而不仅仅是图像。

DEMO: http://jsfiddle.net/mwu4M/3/

Answer 2

您有多个具有相同ID的元素，因此Javascript只接受第一个。改为使用class="imageshow"即可。

脚本如下所示：

function showIt(imgsrc)
{
    var images = document.getElementsByClassName('imageshow');

    for(var i=0; i<images.length; i++)
    {
        images[i].src=imgsrc;
        images[i].style.display='';
    }
}

function hideIt()
{
    var images = document.getElementsByClassName('imageshow');

    for(var i=0; i<images.length; i++)
    {
        images[i].style.display='none';
    }
}

Answer 3

document.getElementById()只会返回一个元素（因为规格说ID应该是唯一的），因此不适用于所有按钮。

您的替代方法是使用名称替换您的ID并使用document.getElementsByName()或类，但是以交叉浏览器方式按类选择元素并不是太简单，除非您在页面上包含诸如jQuery之类的库。

无法在图像周围添加按钮

3 个答案: