我的 Hammer.js 代码不适用于 IF 条件

Question

当我在智能手机屏幕上“点击”时，我正在使用 jQuery 和 Hammer.js 来修改我的网站的样式属性。

我有 3 个元素：img#icone-bijagos、p#texte-bijagos 和 a#lien-bijagos。链接lien-bijagos 与图像icone-bijagos 相关。文本 texte-bijagos 不透明度在 CSS 中设置为 0。

当我第一次“点击”时，我希望文本的不透明度变为1，并且我不希望链接自行激活。在第二次点击时，我希望链接自行激活。

我想我会使用 if 条件：if opacity==="0"，然后是 opacity==="1" 和 pointerEvents==="none"（停用链接），如果是 opacity==="1"，然后是 pointerEvents==="auto"。但它不起作用。

当我第一次点击屏幕时，文本出现并且链接没有激活，但是当我第二次点击时，什么也没有发生。

var iconeBijagos = document.getElementById("icone-bijagos");
if (document.getElementById("texte-bijagos").style.opacity === "0") {
  Hammer(iconeBijagos).on("tap", function(event) {
    document.getElementById("lien-bijagos").style.pointerEvents === "none";
    document.getElementById("texte-bijagos").style.opacity === "1";
  });
} else if (document.getElementById("texte-bijagos").style.opacity === "1") {
  Hammer(iconeBijagos).on("tap", function(event) {
    document.getElementById("lien-bijagos").style.pointerEvents === "auto";
  });
}

#icone-bijagos {
  position: absolute;
  left: 41%;
  top: 40%;
  width: 2%;
}

#icone-bijagos:hover {
  width: 2.2%;
}

#texte-bijagos {
  position: absolute;
  left: 43.5%;
  top: 37%;
  opacity: 0;
  color: #ff9600;
  font-weight: bold;
}

#bijagos:hover #texte-bijagos {
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  opacity: 1;
}

<div id="bijagos">
  <a href="www..." id="lien-bijagos">
    <img src="www..." id="icone-bijagos">
  </a>
  <p id="texte-bijagos">La géologie des Bijagos</p>
</div>

Answer 1

element.style 返回通过元素的style 属性应用的内联样式。不是通过 css 类应用的样式。

使用window.getComputedStyle，它通过应用的任何方式返回元素的当前样式。

var iconeBijagos = document.getElementById("icone-bijagos");
var texteBijagos = document.getElementById("texte-bijagos");
var lienBijagos = document.getElementById("lien-bijagos");

var texteStyle = window.getComputedStyle(texteBijagos);

if (texteStyle.opacity === "0") {
  Hammer(iconeBijagos).on("tap", function(event) {
    lienBijagos.style.pointerEvents = "none";
    texteBijagos.style.opacity = "1";
  });
} else if (texteStyle.opacity === "1") {
  Hammer(iconeBijagos).on("tap", function(event) {
    lienBijagos.style.pointerEvents = "auto";
  });
}

#icone-bijagos {
  position: absolute;
  left: 41%;
  top: 40%;
  width: 2%;
}

#icone-bijagos:hover {
  width: 2.2%;
}

#texte-bijagos {
  position: absolute;
  left: 43.5%;
  top: 37%;
  opacity: 0;
  color: #ff9600;
  font-weight: bold;
}

#bijagos:hover #texte-bijagos {
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  opacity: 1;
}

<div id="bijagos">
  <a href="www..." id="lien-bijagos">
    <img src="www..." id="icone-bijagos">
  </a>
  <p id="texte-bijagos">La géologie des Bijagos</p>
</div>

---

cmets 后更新

您将需要使用一个 tap 处理程序并在其中进行测试

var iconeBijagos = document.getElementById("icone-bijagos");
var texteBijagos = document.getElementById("texte-bijagos");
var lienBijagos = document.getElementById("lien-bijagos");

Hammer(iconeBijagos).on("tap", function(event) {
  var texteStyle = window.getComputedStyle(texteBijagos);

  if (texteStyle.opacity === "0") {
    lienBijagos.style.pointerEvents = "none";
    texteBijagos.style.opacity = "1";
  } else if (texteStyle.opacity === "1") {
    lienBijagos.style.pointerEvents = "auto";
  }

});