0

これは、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';
}

追加されるボタンは 1 つだけです。誰でもこの問題を解決できますか。ありがとうございました

4

3 に答える 3

2

これは、特定の ID を持つ要素を 1 つしか持てないためです。

クラスを使用する必要があります。

http://jsfiddle.net/mwu4M/を参照してください

HTML

それらの醜いもの&nbsp;を取り除き<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' src.

srcしかし、itを its 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);
}

デモ: http://jsfiddle.net/mwu4M/2/

編集3：

:hoverしかし、よりシンプルで CSS のみのを使用することを好むかもしれません。

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

ただし、マウスをホバーする#wrapperと、画像だけでなくボタンが表示されます。

デモ: http://jsfiddle.net/mwu4M/3/

于 2012-09-03T15:19:39.287 に答える
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';
    }
}
于 2012-09-03T15:20:10.763 に答える
1

document.getElementById()は 1 つの要素のみを返すため (仕様では ID は一意である必要があるため)、すべてのボタンには適用されません。

代わりに、ID を名前に置き換えてdocument.getElementsByName()クラスを使用することもできますが、ページに jQuery などのライブラリを含めることに同意しない限り、クロス ブラウザーの方法でクラスごとに要素を選択するのは簡単ではありません。

于 2012-09-03T15:22:37.633 に答える