Question

我正在制作社交折扣插件。当用户单击Facebook和Instagram时，单击链接，然后显示优惠券框。

仅当用户单击两个链接时div才会显示。我的Java脚本不好，请帮助我。

<div class="popup">

<div class="social-links">
    <h3>Like + Follow = Get Rs 50 Discount</h3>
    <a href="fb://page/2288133548123387" target="_blank" rel="alternate noopener noreferrer"><img src="images/facebook-logo.png" alt="" />Facebook</a>
    <a href="instagram://user?username=kidsfitter" target="_blank" rel="alternate noopener noreferrer"><img src="images/facebook-logo.png" alt="" />Instagram</a>
</div>  

<div class="coupon">
    <p>Congratulations: Your Coupon Code is "Discount50". Use it in Checkout Page.</p>
</div>

</div>

因此，我希望用户单击Facebook链接和“赞页面”，然后返回网站并单击Instagram链接并关注页面。然后他回到网站，将优惠券div显示。

致谢

Answer 1

这是使用CSS的一种方法：

var instagramClicked = false;
var facebookClicked = false;

document.getElementById('instagram').addEventListener('click', () => {
  this.instagramClicked = true;
  this.showCoupon();
});

document.getElementById('facebook').addEventListener('click', () => {
  this.facebookClicked = true;
  this.showCoupon();
});

function showCoupon() {
  if (this.instagramClicked && this.facebookClicked) {
    setTimeout(() => document.getElementById('coupon').style = 'display: block', 1000);
  }
}

<div class="popup">

<div class="social-links">
    <h3>Like + Follow = Get Rs 50 Discount</h3>
    <a href="" target="_blank" rel="alternate noopener noreferrer" id="facebook"><img src="images/facebook-logo.png" alt="" />Facebook</a>
    <a href="" target="_blank" rel="alternate noopener noreferrer" id="instagram"><img src="images/facebook-logo.png" alt="" />Instagram</a>
</div>  

<div class="coupon" style="display: none;" id="coupon">
    <p>Congratulations: Your Coupon Code is "Discount50". Use it in Checkout Page.</p>
</div>

</div>

Answer 2

为链接和样式属性添加id属性，这些属性可以隐藏您的优惠券块

<div class="popup">

<div class="social-links">
    <h3>Like + Follow = Get Rs 50 Discount</h3>
    <a href="fb://page/2288133548123387" target="_blank" rel="alternate noopener noreferrer" id="facebook-link"><img src="images/facebook-logo.png" alt="" />Facebook</a>
    <a href="instagram://user?username=kidsfitter" target="_blank" rel="alternate noopener noreferrer" id="instagram-link"><img src="images/facebook-logo.png" alt="" />Instagram</a>
</div>

<div class="coupon" style="display: none;">
    <p>Congratulations: Your Coupon Code is "Discount50". Use it in Checkout Page.</p>
</div>

然后在下面添加保持状态（是否被单击）链接的变量，单击处理程序以及用于检查被单击变量的变量。

<script>

var facebookClicked = false;
var instagramClicked = false;

document.querySelector("#facebook-link").addEventListener("click", function (e) {
    facebookClicked = true;
    showCoupon();
});

document.querySelector("#instagram-link").addEventListener("click", function (e) {
    instagramClicked = true;
    showCoupon();
});

function showCoupon() {
    if (facebookClicked && instagramClicked) {
        document.querySelector(".coupon").removeAttribute("style");
    }
}

</script>

单击两个链接时显示Div

2 个答案: