Question

我想问：我用一些值创建了一个选择选项，例如：

function updateinput(e) {
 
var selectedOption = e.target.options[e.target.selectedIndex];
   var url = selectedOption.getAttribute('data-url');
document.getElementById('data1').value = selectedOption.getAttribute('data1');
document.getElementById('data2').value = selectedOption.getAttribute('data2');
document.getElementById('data3').value = selectedOption.getAttribute('data3');
document.getElementById('data4').value = selectedOption.getAttribute('data4');
document.getElementById('data5').value = selectedOption.getAttribute('data5');
document.getElementById('data-url').setAttribute('href', url);
  document.getElementById('data-url').innerHTML=url;
}

<select onChange="updateinput(event)">
<option data1='1.000.000' data2='0,-' data3='0,-' data4='0,-' data5='1.000.000' data-url='http://google.com'>30 Day</option>
<option data1='1.500.000' data2='500.000,-' data3='0,-' data4='0,-' data5='2.000.000' data-url='http://yahoo.com'>60 Day</option>
</select>

<input id="data1" name="data1" readonly type="text">
<input id="data2" name="data2" readonly type="text">
<input id="data3" name="data3" readonly type="text">
<input id="data4" name="data4" readonly type="text">
<input id="data5" name="data5" readonly type="text">
<a id="data-url" name="data-url">Anchor</a>

我想将网址http://google.com或http://yahoo.com更改为按钮

我这样尝试：

<a id="data-url" name="data-url" type="button">Anchor</a>不起作用（按钮不显示）

<button><a id="data-url" name="data-url">Anchor</a></button>（按钮显示，但链接不在按钮中）

如果无法更改为按钮，请按以下方式更改网址http://google.com或http://yahoo.com： Google Yahoo （其他文字，但仍可点击）

预先感谢

Answer 1

您可以使用CSS将<a>-链接元素样式化为按钮。我想这会满足您的需求。

我给了<option>个元素另外一个名为data-attribute的{{1}}。然后我将它们称为“ Google ”和“ Yahoo ”，此名称会打印在data-name上，而实际链接会进入textContent-链接中的属性。

对于未来：将DOM元素保存在变量中，以便可以更轻松地使用它们。这就是href的来源。

link.href

function updateinput(e) {
var selectedOption = e.target.options[e.target.selectedIndex];
var url = selectedOption.getAttribute('data-url');
var name = selectedOption.getAttribute("data-name");
const link = document.getElementById('data-url');
const data1 = document.getElementById('data1');
const data2 = document.getElementById('data2')
const data3 = document.getElementById('data3')
const data4 = document.getElementById('data4')
const data5 = document.getElementById('data5')

data1.value = selectedOption.getAttribute('data1');
data2.value = selectedOption.getAttribute('data2');
data3.value = selectedOption.getAttribute('data3');
data4.value = selectedOption.getAttribute('data4');
data5.value = selectedOption.getAttribute('data5');

link.href = url;
link.textContent = name;
link.classList.remove("hidden");
}

#data-url{
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #EEEEEE;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}
.hidden{
  display:none;
}

编辑：

在锚点中添加了类<select onChange="updateinput(event)"> <option selected="selected" hidden="hidden"></option> <option data1='1.000.000' data2='0,-' data3='0,-' data4='0,-' data5='1.000.000' data-url='http://google.com' data-name="Google">30 Day</option> <option data1='1.500.000' data2='500.000,-' data3='0,-' data4='0,-' data5='2.000.000' data-url='http://yahoo.com' data-name="Yahoo">60 Day</option> </select> <input id="data1" name="data1" readonly type="text"> <input id="data2" name="data2" readonly type="text"> <input id="data3" name="data3" readonly type="text"> <input id="data4" name="data4" readonly type="text"> <input id="data5" name="data5" readonly type="text"> <a id="data-url" class="hidden" name="data-url">Anchor</a>，使其在开始时不可见。
添加了空hidden作为默认选择，并且将其隐藏，因此不会出现在下拉菜单中。
选择了以下选项后即添加了<option>：显示link.classList.remove。
重构的JS以提高可读性。

Answer 2

document.getElementById('your ID').click()

在这种情况下，您的链接就像一个按钮...

Answer 3

我希望这是您要寻找的。在<a>中添加了按钮类，并在CSS中将其样式化为按钮。有关更多信息，以下链接将帮助您根据需要将css添加到按钮类中。看看this link

function updateinput(e) {

  var selectedOption = e.target.options[e.target.selectedIndex];
  var url = selectedOption.getAttribute('data-url');
  document.getElementById('data1').value = selectedOption.getAttribute('data1');
  document.getElementById('data2').value = selectedOption.getAttribute('data2');
  document.getElementById('data3').value = selectedOption.getAttribute('data3');
  document.getElementById('data4').value = selectedOption.getAttribute('data4');
  document.getElementById('data5').value = selectedOption.getAttribute('data5');
  document.getElementById('data-url').setAttribute('href', url);
  document.getElementById('data-url').innerHTML = url;
}

.button{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    background-color:#ddd;
    border: 1px solid #ddd;
    border-radius: 4px;
}

<select onChange="updateinput(event)">
  <option data1='1.000.000' data2='0,-' data3='0,-' data4='0,-' data5='1.000.000' data-url='http://google.com'>30 Day</option>
  <option data1='1.500.000' data2='500.000,-' data3='0,-' data4='0,-' data5='2.000.000' data-url='http://yahoo.com'>60 Day</option>
</select>

<input id="data1" name="data1" readonly type="text">
<input id="data2" name="data2" readonly type="text">
<input id="data3" name="data3" readonly type="text">
<input id="data4" name="data4" readonly type="text">
<input id="data5" name="data5" readonly type="text">
<a id="data-url" class="button" name="data-url">Anchor</a>

Answer 4

您也可以输入或按钮元素，而不是a-tag。

... <input id="data-url" type="button" onclick="data-url-location-href';" value="data-url" /> ....

您只需要更新您的JavaScript。

Answer 5

我想将网址http://google.com或http://yahoo.com更改为按钮

只需将<button>与<a>换行

如何将yahoo.com更改为Yahoo，但仍可以在按钮中单击？

由于您已经使用了data-*属性，因此可以在此处使用它。或者，只需使用button的value属性。

button:after {
  content: attr(data-text);
}

<a href="http://yahoo.com" target="_blank"><button data-text="Yahoo"></button></a>
<a href="http://google.com" target="_blank"><button data-text="Google"></button></a>

Answer 6

好吧，如果您在fs.readdirSync(testFolder).forEach(file => { console.log(file); }) var fs = require('fs'); var files =fs.readdirSync('C:/Users/AmazePC9/Desktop/test/'); var file = new File("C:/Users/AmazePC9/Desktop/test/");标签上提到目标，我想您可以解决这个问题

<a>

尝试以下代码：

<a href="http://google.com" target="_blank" class="btn btn-default">Go to Google</a>

function updateinput(e) {
 
var selectedOption = e.target.options[e.target.selectedIndex];
   var url = selectedOption.getAttribute('data-url');
document.getElementById('data1').value = selectedOption.getAttribute('data1');
document.getElementById('data2').value = selectedOption.getAttribute('data2');
document.getElementById('data3').value = selectedOption.getAttribute('data3');
document.getElementById('data4').value = selectedOption.getAttribute('data4');
document.getElementById('data5').value = selectedOption.getAttribute('data5');
  var aTag = document.getElementById("data-url");
aTag.setAttribute('href',url);
if(url=='http://google.com')
  aTag.innerHTML = "Google";
else
  aTag.innerHTML = "Yahoo";

}

如何从document.getElementById .setAttribute href添加按钮或将长网址更改为其他名称

6 个答案: