Question

我试图编写这个javascript函数，以便当我将鼠标悬停在图像上时，标题会改变其颜色。我得到了它的工作，但由于某些原因它只适用于第一个div ...也许我的范围是错误的？

谢谢！

<body>
    <div>
      <a href="" id="img"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" id="head1"><h1>test title</h1></a>
    </div>
    <div>
      <a href="" id="img"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" id="head1"><h1>test title</h1></a>
    </div>
</body>
<script type="text/javascript">
var image = document.getElementById("img");
var text1 = document.getElementById("head1");

function textRed() {
    text1.style.color = 'red';
};

function textDefault() {
    text1.style.color = 'blue';
};

image.onmouseover = function(){
  textRed()
};

image.onmouseout = function(){
  textDefault()
};

</script>

Answer 1

您永远不应该使用具有相同ID的多个元素。请改用类，然后使用JS：

var image = document.getElementsByClassName("img");
var text1 = document.getElementsByClassName("head1");

然后HTML变为：

<body>
    <div>
      <a href="" class="img"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" class="head1"><h1>test title</h1></a>
    </div>
    <div>
      <a href="" class="img"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" class="head1"><h1>test title</h1></a>
    </div>
</body>

Answer 2

为此你可以（而且应该）只使用css。

a h1 {
  color: blue
}
a:hover ~ a h1 {
  color: red
}

    <div>
      <a href="" id="img1"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" id="head1"><h1>test title</h1></a>
    </div>
    <div>
      <a href="" id="img2"><img src="http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg" class="img" width="200"></a>
      <a href="" id="head2"><h1>test title</h1></a>
    </div>

Answer 3

拥有ID的概念是能够唯一地识别某些东西。由于您要对一堆 HTML 元素进行分组，因此您需要使用classes。

因此，使用以下 JavaScript 函数获取包含ClassName的所有元素的数组。

document.getElementsByClassName("ClassName")

那么，你必须遍历每个元素并添加你的功能。但是，代码看起来不像你拥有它。有两种简单的方法可以实现这一点。

使用具有被调用函数的设计可能如下所示：

var elements = document.getElementsByClassName("ClassName")
for(var i in elements) {
    // Used to prevent a scoping problem where each element becomes the same.
    (function(elem) {
    elem.mouseover = function() {
        // Sets the color of that element. (Green's my favorite color... Sorry...)
        elem.style.color = 'green';
    }
    )(elements[i]);
}

现在，另一种方法是使用以下事实：当触发mouseover事件时，函数的范围是元素。这意味着this是与之互动的元素。

...
function setColor() {
    this.style.color = `green`;
}
for(var i in elements) {
    // Nicer way...
    elements[i].mouseover = setColor;
    // Or can do something similar to what you are doing:)
    elements[i].mouseover = function() {
        // Calls the setColor function in the correct scope:)
        setColor.call(this);
    }
}

现在，我知道您的问题是 JavaScript ，但最好使用 CSS 来执行此操作。

a.ClassName {
    color: yellow;/* Default Color. Not needed unless you want to have a special color. */
}
a.ClassName:hover {
    color: green; /* Assigns the color on mouseover. */
}

希望这会有所帮助!!

我的javascript只适用于第一个div？

3 个答案: