当选择按钮组中的特定按钮时,如何分配不同的URL链接?

时间:2017-05-20 04:43:49

标签: javascript php html

我想创建一组按钮,点击后会返回到用户电子邮件的不同下载链接。我正在尝试使用javascript开关,但我不知道如何返回下载链接,以便可以使用PHP检索下载链接在电子邮件中发送。

<div class="row">
  <div class="col-md-3">
    <div class="text-center">
      <i class="fa fa-file" style="font-size:48px; color:#00ffff;"></i>
      <span><h6>User Manual:Accounting</h6></span>
      <button class="downloadButton" id="401" type="button" data-toggle="modal" data-target="#downloadModal" style="border-radius:5px; outline:none; background-color:Transparent;">
      <i class="fa fa-download" style="font-size:24px; color:#737373;"></i>
      </button>
   </div>
 </div>

 <script>
function linkFunction(){
    var buttonClass = document.getElementsByClassName["download-button"];
    var buttonId = buttonId.attr('id');
    var link;

1 个答案:

答案 0 :(得分:1)

这可能是您正在寻找的吗?希望它有所帮助!

<html>
<head>
<script>
window.onload = doThis;

/* This one would work well and allow you to pass arguments */
function doThis() {
  var buttonClass = document.getElementById("download_button");
  var buttonId = buttonClass.id;
  var buttonName = buttonClass.name;
  var buttonLinkId = buttonClass.getAttribute('data-linkId');

  buttonClass.addEventListener('click', buttonClickedCaller);

  function buttonClickedCaller(){
    buttonClicked(buttonLinkId);
  }

  function buttonClicked(foo) {
    console.log('http://localhost/?' + foo);
    window.location = 'http://localhost/?' + foo;
    // window.open('http://localhost/?'+foo);
  }
}

/*
// here's a simpler example
function doThis() {
  var buttonClass = document.getElementById("download_button");
  var buttonId = buttonClass.id;
  var buttonName = buttonClass.name;
  var buttonLinkId = buttonClass.getAttribute('data-linkId');

  buttonClass.addEventListener('click', buttonClicked);

  function buttonClicked() {
    console.log('http://' + buttonLinkId);
  }
}

//  careful though, this won't work.
function doThis() {
  var buttonClass = document.getElementById("download_button");
  var buttonId = buttonClass.id;
  var buttonName = buttonClass.name;
  var buttonLinkId = buttonClass.getAttribute('data-linkId');
  // Passing a Variable in Below Here
  buttonClass.addEventListener('click', buttonClicked(buttonLinkId));
  // Will Break Here & It's executed onload, but the above one isn't
  function buttonClicked(foo) {
    console.log('http://' + foo);
  }
}
*/


</script>
</head>
<body>
<div class="row">
  <div class="col-md-3">
    <div class="text-center">
      <span><h6>User Manual:Accounting</h6></span>
      <button id="download_button" data-linkId="401">
        Click Here
      </button>
    </div>
  </div>
</body>
<html>