JavaScript 通过搜索另一个自定义属性来更改自定义属性的值

Question

感谢您的阅读。 因此，输入标签没有 ID 或类名。 值属性也是自定义的。 这就是我正在尝试的。

.HTML

<input name="password" data-value="">

.

@"var aTags = document.getElementsByTagName('input');
var searchText = 'password';var found;  
for (var i = 0; i < aTags.length; i++)
{
if (aTags[i].textContent == searchText){found = 
aTags[i].setAttribute('data-value','123456789');  
alert(found.getAttribute('data-value')); break;}
}");

或

var myInput=$('input[data-value='']').setAttribute('data-value','12345678'); 
alert(myInput.getAttribute('data-value'));

我尝试按名称使用 get 元素，但没有任何显示。我认为可能会有多个结果。我想要一个更安全的解决方案。

Answer 1

谢谢大家，我没想到会有这么好的回应。

我很想看看这将如何解决，但显然以下行有效

aTags[i].value='123456789';

我想如果找不到确切的"value"属性，任何带有单词值的东西都被视为值字段。

谢谢闪光灯，我想 attr 也可能为此工作。

Answer 2

var myInput = $('input[name="password"]').setAttribute('data-value','12345678'); 
alert(myInput.getAttribute('data-value'));

试试这个

Answer 3

由于您已经在使用 jQuery，因此您可以使用attr()方法来获取指定属性的值。

var myInput = $('input[data-value]').attr("data-value","12345678");
console.log(myInput.attr('data-value'))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-value="">

Answer 4

var myInput = $('input[name="password"]').attr('data-value','12345678'); 
alert(myInput.attr('data-value'));

尝试这样的事情

Answer 5

我希望它会有所帮助。

const setAttribute = (attr, val) => input => {
return input.setAttribute(attr, val)
}
window.addEventListener("load", () => {
const searchValue = "1231"
const selector = `input[value='${searchValue}']`;

const inputs = Array.from(document.querySelectorAll(selector));

inputs.map(setAttribute("data-value", "1231231"))
})

<input value="1231" />
<input value="1231" />
<input value="aaa" />

Answer 6

使用 jQuery，您可以直接访问数据属性，但您必须循环访问它们，因为可能有多个：

$.each($('input[data-value='']'),function(){
$(this).data('value','12345678'); 
});

或者，如果输入字段只有一个，请使用 ID：

<input type='password' id="pwd" data-value="" />

和

$('#pwd').data('value','12346578');

Answer 7

<input />是一个自闭元素，因此它不会textContent属性。但是，是的，在某些浏览器中，如果您键入<input>text content</input>，它会起作用，但在其他浏览器中它不起作用。

我建议将该值保留在input的属性中。请遵循下面的示例。

文档：

关于文本内容：https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

自闭合元件：https://developer.mozilla.org/en-US/docs/Glossary/Empty_element

<input type="text" data-textcontent="password"/>

.JS

var aTags = document.getElementsByTagName('input');
var found;
var searchText = 'password';var found;  
for (var i = 0; i < aTags.length; i++)
{
console.log(aTags[i].getAttribute('data-textcontent'));
if (aTags[i].getAttribute('data-textcontent') == searchText){ 
aTags[i].setAttribute('data-value','123456789');  
found = aTags[i].getAttribute('data-value');
break;
}
}
console.log(found);