Question

我正在尝试使用鼠标悬停效果使类navButtons影响其中的所有ID。我在这里读到，您可以使用for循环执行此操作，但这需要更改ID的名称。有没有办法在不改变名字的情况下做到这一点？

document.getElementsByClassName("navButtons").addEventListener("mouseover", mouseOver);
document.getElementsByClassName("navButtons").addEventListener("mouseout", mouseOut);

function mouseOver() {
    document.getElementsByClassName("navButtons").style.color = "red";
}

function mouseOut() {
    document.getElementsByClassName("navButtons").style.color = "black";
}

<nav>
  <div class="navButtons">
      <div id="about">about</div>
      <div id="portfolio">portfolio</div>
      <div id="contact">contact</div>
  </div>   
</nav>

Answer 1

您可以使用css将悬停效果添加到div div内的所有.navButtons。

.navButtons div{
	color: red;
}
.navButtons div:hover{
	color: green;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Hover effect</title>
</head>
<body>
<nav>
  <div class="navButtons">
      <div id="about">about</div>
      <div id="portfolio">portfolio</div>
      <div id="contact">contact</div>
  </div>   
</nav>
</body>
</html>

Answer 2

如果我正确理解您，您希望在悬停navButtons时将样式应用于navButtons内的所有元素。这只能用CSS完成。

＆＃13;

.navButtons:hover > div {
  color: red;
}

＆＃13;

<nav>
  <div class="navButtons">
      <div id="about">about</div>
      <div id="portfolio">portfolio</div>
      <div id="contact">contact</div>
  </div>   
</nav>

＆＃13;

但是，出于某种原因，如果您想要使用Javascript（不建议用于此目的），您可以执行以下操作：

＆＃13;

var navButtons = document.getElementsByClassName('navButtons')[0];
var children = navButtons.getElementsByTagName('div');
  
navButtons.addEventListener('mouseenter', function() {
  for (var i = 0; i < children.length; i++) {
    children[i].style.color = 'red';
  }
});

navButtons.addEventListener('mouseleave', function() {
  for (var i = 0; i < children.length; i++) {
    children[i].style.color = 'black';
  }
});

＆＃13;

<nav>
  <div class="navButtons">
      <div id="about">about</div>
      <div id="portfolio">portfolio</div>
      <div id="contact">contact</div>
  </div>   
</nav>

＆＃13;

Answer 3

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) { guard let image = info[UIImagePickerControllerOriginalImage] as? UIImage else { return } let documentDirectory: NSString = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true).first! as NSString let imageName = "temp" let imagePath = documentDirectory.appendingPathComponent(imageName) if let data = UIImageJPEGRepresentation(image, 80) { do { try data.write(to: URL(fileURLWithPath: imagePath), options: .atomic) } catch let error { print(error) } } Alamofire.upload(.POST, "\(self.app_url)/user/upload", multipartFormData: { formData in let filePath = NSURL(fileURLWithPath: image) formData.appendBodyPart(fileURL: filePath, name: "upload") formData.appendBodyPart(data: "Alamofire".dataUsingEncoding(NSUTF8StringEncoding, allowLossyConversion: false)!, name: "test") }, encodingCompletion: { encodingResult in switch encodingResult { case .Success: print("SUCCESS") case .Failure(let error): print(error) } }) self.dismiss(animated: true, completion: nil) } 您正在尝试将事件侦听器添加到节点列表中，您必须使用循环将其附加到列表中的每个节点。然后，您可以使用Ambiguous reference to member 'upload(_:to:method:headers:)'访问document.getElementsByClassName("navButtons").addEventListener("mouseover", mouseOver);函数中的当前元素。

mouseOver()

event.target

Answer 4

您可以通过此方法获得班级的所有孩子

var c = document.getElementById("navButtons").children;

c现在是一个数组。因此，您可以迭代此数组，从而与每个孩子联系即c[0]是第一个元素

Javascript使用鼠标悬停类来影响子ID

4 个答案: