javascript - 不满足条件时链接 标记下载默认 HTML 页面

Question

我遇到了一个奇怪的问题。我有一个要下载的链接标签，例如

     <div class="col-md-4 about-right">
         <ul>
        <h5>Get My Cv</h5>
        <li><span class="glyphicon glyphicon-user"><input type="radio"class="rad" id="radio1" name="optradio"></span>Download In PDF</li>
        <li><span class="glyphicon glyphicon-user"><input type="radio" class="rad" id="radio2" name="optradio"></span>Download In Word Doc</li>
        <li><span class="glyphicon glyphicon-user"><input type="radio" class="rad"id="radio3"name="optradio"></span>Download In HTML</li>
        <center>
        <a href="#" id="cvLink"  download onclick="getCv()">
         <button type="button" class="btn btn-info">Download</button></a> 
        </center>
       </ul> 
       </div> 

它使用单选按钮检查验证来下载文档。我还有 3 个单选按钮。我根据单击的单选按钮更改 URL 链接，并使用 JavaScript 下载文档。但问题是，当任何单选按钮未单击时，我想显示警报并使链接不执行任何操作。

我使用“#, javaScript:void(0)”尝试了这一点。它显示了警报，但也下载了我正在处理的主要 HTML 文件。我只是希望该链接不会执行任何操作，而仅显示警报。

我的代码如下

<script>
function getCv() {
    if(document.getElementById('radio1').checked) {
        document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=MZTFCWnRYbnlvclk";
    }   

    else if(document.getElementById('radio2').checked) {
        document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=uK6ct7MZ2N6Ni1qQUFyWXM";
    }
    else if(document.getElementById('radio3').checked) {
     document.getElementById('cvLink').href = "https://drive.google.com/uc?export=download&id=0VDenJqUldud2M";
    }

    else
    {

     alert('Please Select Any Format To Download!!');
    }
  return false;
}
</script>

Answer 1

首先，在我们回答您的问题之前，我想花点时间指出您的 HTML 的一些问题:

<div class="col-md-4 about-right">
  <ul>
    <h5>Get My Cv</h5>
    <li><span class="glyphicon glyphicon-user">
      <input type="radio"class="rad" id="radio1" name="optradio"></span>Download In PDF
    </li>
    <li><span class="glyphicon glyphicon-user">
      <input type="radio" class="rad" id="radio2" name="optradio"></span>Download In Word Doc</li>
    <li><span class="glyphicon glyphicon-user">
    <input type="radio" class="rad"id="radio3"name="optradio"></span>Download In HTML</li>
    <center>
      <a href="#" id="cvLink" download onclick="getCv()">
        <button type="button" class="btn btn-info">Download</button>
      </a>
    </center>
  </ul>
</div>

因此，第一个问题是重复两次的问题，即 <ul> (或 <ol> )的唯一有效直接子元素是 <li> 元素。其中的其他内容，即 <h5> 和 <center>(稍后会详细介绍)是无效的 HTML，它们放置在此处。

您可以选择从 <ul> 中删除这些元素，就像我所做的那样，或者您可以简单地将它们包装在父级 <li> 中，以便 DOM 结构变得有效。

此外，我认为自 HTML 4.1 以来 <center> 元素已被弃用。然而，无论何时它被弃用，它仍然被弃用，不应再使用。如果您需要在布局中居中使用 CSS 来设计文档的呈现样式，则 HTML 应该只定义结构。

此外，我认为这是 HTML 的最后一个问题，在另一个交互元素(例如 <button> )中包含交互元素(例如 <a> )是无效的 HTML。在我的演示中，为了重现您的问题，我只是丢弃了 <button> 元素，因为它没有 download 属性。

也就是说，以下 JavaScript 是我建议的解决方案，HTML 与 JavaScript 和 CSS 一起也位于代码片段中:

// a named function to highlight the <input> elements required
// in order to enable the <a> element:
function highlightRequirements(e) {

  // caching the element that initiated the events
  // here the <a> element:
  let clicked = this,

      // retrieving the elements that are required to
      // be chosen amongst before the <a> can be used:
      required = document.querySelectorAll(

        // I store, in the <a> element the attribute:
        // data-required="input[name=optradio]"
        // here we use the HTMLElement.dataset interface
        // to retrieve that selector, which is passed as
        // the argument to document.querySelectorAll:
        clicked.dataset.required
      );

  // if the event type (the event, 'e', is passed automatically
  // from the EventTarget.addEventListener() method) is the
  // 'mouseenter' event:
  if (e.type === 'mouseenter') {

    // if the <a> element has the download attribute set:
    if (clicked.download) {

      // we remove the event-listener bound to that element
      // for both 'mouseenter' and 'mouseleave' events:
      this.removeEventListener('mouseenter', highlightRequirements);
      this.removeEventListener('mouseleave', highlightRequirements);

      // and we iterate over the required elements, using
      // Array.prototype.forEach(), and an Arrow function
      // expression, to remove the 'highlight' class from
      // the parentNode of each required ('req') element:
      required.forEach(req => req.parentNode.classList.remove('highlight'));
    } else {

      // if the <a> element does not have the download property,
      // we iterate over the required elements and add the
      // 'highlight' class-name, in order to trigger the animation
      // defined in the CSS, in order to draw the users' attention:
      required.forEach(req => req.parentNode.classList.add('highlight'));
    }

  // otherwise, if the event was not the 'mouseenter' event (and so
  // must be the 'mouseleave' event):
  } else {

    // we iterate over the required elements, and remove the 'highlight'
    // class-name from their parentNodes:
    required.forEach(req => req.parentNode.classList.remove('highlight'));
  }
}

// a named function, fired by the radio inputs, to
// 'enable' or 'activate' the <a> element:
function linkActivate(e) {

  // we use document.querySelector to retrieve the first
  // - if any - element matching the supplied selector:
  var link = document.querySelector(

    // similarly to above, I stored the selector for the
    // relevant <a> element in the 'data-link' attribute,
    // and retrieve that attribute-value using the
    // HTMLElement.dataset interface:
    this.dataset.link
  );

  // setting the download attribute to 'true':
  link.download = true;

  // retrieving the 'data-downloadfrom'
  // attribute-value from the changed
  // radio input:
  link.href = this.dataset.downloadfrom;

  // adding the 'allowed' class to the
  // <a> element, to show that interaction
  // is now possible:
  link.classList.add('allowed');
}

// selecting all the <input> elements with name="optradio":
let radios = document.querySelectorAll('input[name=optradio]'),

    // converting that NodeList into an Array, using
    // Array.from():
    radioArray = Array.from(radios),

  // retrieving the <a> element using
  link = document.querySelector('#cvLink');

// iterating over the Array of radio-inputs using
// Array.prototype.forEach() and an Arrow function:
radioArray.forEach(

  // here we bind the linkActivate() function as the
  // event-handler for the 'change' event:
  radio => radio.addEventListener('change', linkActivate)
);

// here we bind the highlightRequirements() function as
// the event-handler for the 'mouseenter' and 'mouseleave'
// events for the <a> element:
link.addEventListener('mouseenter', highlightRequirements);
link.addEventListener('mouseleave', highlightRequirements);

function highlightRequirements(e) {
  let clicked = this,
      required = document.querySelectorAll(clicked.dataset.required);

  if (e.type === 'mouseenter') {

    if (clicked.download) {
      this.removeEventListener('mouseenter', highlightRequirements);
      this.removeEventListener('mouseleave', highlightRequirements);
      required.forEach(req => req.parentNode.classList.remove('highlight'));
    } else {
      required.forEach(req => req.parentNode.classList.add('highlight'));
    }
  } else {
    required.forEach(req => req.parentNode.classList.remove('highlight'));
  }
}

function linkActivate(e) {
  let link = document.querySelector(this.dataset.link);

  link.download = true;
  link.href = this.dataset.downloadfrom;
  link.classList.add('allowed');
}

let radios = document.querySelectorAll('input[name=optradio]'),
    radioArray = Array.from(radios),
    link = document.querySelector('#cvLink');

radioArray.forEach(
  radio => radio.addEventListener('change', linkActivate)
);

link.addEventListener('mouseenter', highlightRequirements);
link.addEventListener('mouseleave', highlightRequirements);

@keyframes highlight {
  0% {
    background-color: transparent;
  }
  75% {
    background-color: limegreen;
  }
  100% {
    background-color: transparent;
  }
}
ul + a {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  margin: 0.5em auto;
}
ul + a {
  color: #66c;
  cursor: no-drop;
  border: 2px solid #66c;
  padding: 0.2em 0.4em;
  border-radius: 0.5em;
  opacity: 0.5;
}
ul + a.allowed {
  opacity: 1;
  cursor: pointer;
}
li span.highlight {
  animation: 3s highlight;
}

<div class="col-md-4 about-right">
  <ul>
    <li>
      <span class="glyphicon glyphicon-user">
      <input type="radio"class="rad" id="radio1" name="optradio" data-downloadfrom="https://drive.google.com/uc?export=download&id=MZTFCWnRYbnlvclk" data-link="#cvLink" />
      </span>Download In PDF</li>
    <li>
      <span class="glyphicon glyphicon-user">
      <input type="radio" class="rad" id="radio2" name="optradio" data-downloadfrom="https://drive.google.com/uc?export=download&id=uK6ct7MZ2N6Ni1qQUFyWXM" data-link="#cvLink" />
      </span>Download In Word Doc
    </li>
    <li>
      <span class="glyphicon glyphicon-user">
    <input type="radio" class="rad" id="radio3" name="optradio" data-downloadfrom="https://drive.google.com/uc?export=download&id=0VDenJqUldud2M" data-link="#cvLink" />
    </span>Download In HTML
    </li>
  </ul>
  <a href="#" id="cvLink" data-required="input[name=optradio]">Download CV </a>
</div>

JS Fiddle demo。

上面的似乎可以工作，尽管我还没有正确验证它；它肯定不会在 JS Fiddle 演示(附件)中抛出任何错误，而且我认为清楚地表明需要从 radio <input> 元素中进行选择。

似乎由于存在 download 属性，下载是在执行您通过 onclick 内联事件处理程序附加的函数之前启动的(这是令人讨厌的 JavaScript，这就是为什么我完全用 JavaScript 绑定(bind)演示中的事件，尽管我确实将大量数据绑定(bind)到 HTML 中的元素)，在这个尝试的解决方案中，我删除了 download 属性，并且仅在选择其中一个 radio 后通过 JavaScript 添加它.