Question

此代码根据设置的时间删除包含广告的div：

此代码在按下按钮后隐藏广告：

   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   <script>
   setTimeout(function(){
   $('#adbox').remove();
   }, 5000);
   </script>

广告点击后是否可以制作脚本来删除或隐藏包含广告的div？

Answer 1

使用jQuery，您可以：

$('#adbox').on('click', function() {
  $(this).hide();
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   
<div id="adbox"> ad code goes here </div>

Widhout jQuery：

document.querySelector('#adbox').onclick = function() {
  this.style.display = 'none';
};

<div id="adbox"> ad code goes here </div>

Answer 2

您可以将$(this)与hide()功能一起使用。在Jquery回调中，$(this)值代表当前元素，因此如果您编写$('#ads').on('click', function(item) {});，$(this)变量将指向$('#ads')元素，这就是我们可以调用的原因Jquery函数就可以了。

$('#ads').on('click', function(item) {
	$(this).hide();
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

#ads {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Hello World</p>
  <div id="ads"></div>
</div>

请注意，大多数代码都是无关紧要的，只有Javascript部分很重要。

如何在用户点击广告时删除广告？要多次保护点击同一广告？

2 个答案: