Question

我正在使用element.innerHTML从下拉的单击元素中检索值：

    $(b).on('click','#input',function(){
        console.log('on click fired')
        /*insert the value for the autocomplete text field:*/
        inpStr=this.innerHTML
        inp.value = this.innerHTML
        /*close the list of autocompleted values,
        (or any other open lists of autocompleted values:*/
        closeAllLists();
    })

现在，InnerHTML看起来像这样：

<div class="col-4 querySelect">23</div>
<div class="col-4">2019-04-04</div>
<div class="col-4">Main</div>

我只想从中得到23。我认为可以使用正则表达式来做到这一点，但我认为使用dom选择器会更好，所以我做到了：

var inputs = document.querySelectorAll(".col-4")
                for (i = 0; i < inputs.length; i++) {
                inputs[i].addEventListener('click', function() {
                    inp.value = inputs[i]
                    console.log(inputs[i])
                });
                }

但是它什么也不返回

从中检索值的最佳方法是什么？

Answer 1

由于所需元素的className为querySelect，因此只需使用该查询字符串即可：

inp.value = document.querySelector('.querySelect').textContent;

检索类似输入的元素的内容时，请引用其value-检索任何其他类型的元素的内容时，请引用其textContent。（仅引用元素本身不会做任何有用的事情）

Answer 2

简单的查询选择器将起作用，此外，如果您正在寻找各种选项，我已经在答案中添加了

。

var inputs = document.querySelector(".col-4"); // returns first Elment
console.log(inputs.textContent)

// with Query Selector All
var inputs2 = document.querySelectorAll(".col-4"); // returns all element

inputs2.forEach(ele => {
  // check for the particulr class
  if (ele.getAttribute("class") == "col-4 querySelect") {
 console.log(ele.textContent)
}
})
// for only query select class
var inputs3 = document.querySelector(".querySelect"); // returns first Elment
console.log(inputs3.textContent)

<div class="col-4 querySelect">23</div>
<div class="col-4">2019-04-04</div>
<div class="col-4">Main</div>

从HTML标签内部获取值

2 个答案: