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

Question

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

我有三个元素：img#icone-bijagos、p#texte-bijagos和a#lien-bijagos。链接CCD_ 4与图像CCD_。文本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>

---

评论后更新

您需要使用一个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";
}
});