Question

当我点击要更改的缩略图（img）时，它也会更改（img1）的主图像。我希望只有AGM缩略图改变（img），而BLACSBF改变（img1）非常感谢任何帮助。（：

我的Javascript

function changeImage(img) {
document.getElementById("img").src = img.src.replace("_t", "_b");
document.getElementById("img1").src = img.src.replace("_t", "_b");

我的HTML

<img src="images/AGM/events_t.jpg" 
onclick='changeImage(this);' 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"          
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img src="images/AGM/events1_t.jpg" 
onclick='changeImage(this);' 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"    
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img id="img" src="images/AGM/events_b.jpg" width="650">



<img src="images/BLACSBF/events_t.jpg" 
onclick='changeImage(this);' 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"    
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img src="images/BLACSBF/events1_t.jpg" 
onclick='changeImage(this);' 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"    
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5">

<img id="img1" src="images/BLACSBF/events_b.jpg" width="650">

非常感谢！

Answer 1

您需要将目标图像元素作为参数传递给changeImage函数

function changeImage(img, target) {
    document.getElementById(target).src = img.src.replace("_t", "_b");
}

然后

<img src="images/AGM/events_t.jpg" 
onclick="changeImage(this, 'img');" 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"          
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img src="images/AGM/events1_t.jpg" 
onclick="changeImage(this, 'img');" 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"    
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img id="img" src="images/AGM/events_b.jpg" width="650">



<img src="images/BLACSBF/events_t.jpg" 
onclick="changeImage(this, 'img1');"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"    
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img src="images/BLACSBF/events1_t.jpg" 
onclick="changeImage(this, 'img1');" 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"    
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5">

<img id="img1" src="images/BLACSBF/events_b.jpg" width="650">

Answer 2

如果您直接在JavaScript中附加事件处理程序，则可以稍微简化一下标记。这不是一个跨浏览器的方法，但它确实有效。首先，您可以缩小标记并将较大的img元素转换为类，而不是担心一堆唯一ID：

<img src="images/AGM/events_t.jpg">
<img src="images/AGM/events1_t.jpg">
<img class="img" src="images/AGM/events_b.jpg" width="650">
<img src="images/BLACSBF/events_t.jpg">
<img src="images/BLACSBF/events1_t.jpg">
<img class="img" src="images/BLACSBF/events_b.jpg" width="650">

然后，在您的JavaScript中，您可以遍历所有没有img属性的class标记，并使用addEventListener()添加您的事件处理程序（这是部分这不适用于IE8，但可以使用cross browser implementation轻松修复。

var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
    if (!imgs[i].getAttribute('class')) {
        //mouseout handler
        imgs[i].addEventListener("mouseout", function () {
            this.style.opacity = 1;
            this.filters.alpha.opacity = 100;
        });

        //mouseover handler
        imgs[i].addEventListener("mouseover", function () {
            this.style.opacity = 0.5;
            this.filters.alpha.opacity = 0.5;
        });

        //click handler
        imgs[i].addEventListener("click", function () {
            var src = this.src.replace("_t", "_b");
            var fullImg = siblingByClass(this);
            fullImg.src = src;

            //traverse siblings till 'img' class is found
            function siblingByClass(node) {
                var sibling = node.nextSibling;
                if (sibling.nodeType === 3 || sibling.getAttribute('class') !== 'img') {
                    return siblingByClass(sibling);
                } else {
                    return sibling;
                }
            }

        });
    }
}

jsFiddle

单击缩略图会更改非预期的主图像

2 个答案: