Question

按下另一个 <a> 按钮后从 <a> 按钮删除类别

2017-05-25

93

javascript jquery

我正在尝试创建一个网站，您可以通过按下按钮下载文件。问题是，我希望人们首先单击另一个按钮来订阅 YouTube 频道，然后才能下载文件。因此，我必须在按下订阅按钮后删除下载按钮上的禁用类。下面是我的代码，我做错了什么？

编辑：现在尝试了所有答案，都没有用。我收到此错误，这是什么意思？

Uncaught ReferenceError: $ is not defined at index.html:23

第 23 行是

$('#sub').on('click',function(event){

$('#sub').on('click',function()){
  $('#dl').removeClass('disabled');
});

.disabled {opacity: 0.8; cursor: not-allowed;}
.size-3 {font-size: 16px;}
.btn {
  font: 100%/1.1 "Quicksand", sans-serif;
  background-color: rgba(0,0,0,0.3);
  border: 2.2px solid #ecf0f1;
  color: #ffffff;
  padding: 12px 62px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-transform: none;
  font-size: 20px;
  margin: 3px 6.9px;
  cursor: pointer;
  transition-duration: 0.4s;
}

<a id="sub" href="#" class="btn size-3">Subscribe to ZERO</a>
<a id="dl" href="#" class="btn size-3 disabled">Download Exyther</a>

Answer 1

jsFiddle： https://jsfiddle.net/qrc3qm2e/

我添加了额外的代码来检查按钮是否不可点击，如果您需要 jQuery 答案，请点击此链接 https://jsfiddle.net/qrc3qm2e/1/

Javascript

var subElement = document.getElementById("sub");
var dlElement = document.getElementById("dl");
subElement.onclick = function(event)
{
    dlElement.classList.remove('disabled');
    dlElement.removeAttribute('disabled');
};

dlElement.onclick = function(event)
{
    if(dlElement.className.indexOf('disabled') > -1)
  {
    event.preventDefault();
    return;
  }
};

HTML

<a id="sub" href="#" target="blank" class="btn size-3">Subscribe to ZERO</a>
<a id="dl" href="#" target="blank" class="btn size-3 disabled" disabled="disabled">Download Exyther</a>

Answer 2

这会使您的代码出现错误： function()) << double close

正确的 JS

$('#sub').on('click',function(event){
  event.preventDefault();
  $('#dl').removeClass('disabled');
});

Answer 3

https://codepen.io/jacobweyer/pen/JNzgJE?editors=1111

这是该问题的 codepen

$('#sub').on('click', function(event){
  if (event.preventDefault) {
    event.preventDefault();
  }
  
  $('#dl').removeClass('disabled');
});

您没有关闭该函数，但您也可以将事件添加到该函数中。这会将点击事件传递到您的 jquery 中。

使用点击事件，您实际上可以通过阻止 a 标签上的默认操作来阻止页面跳转移动。