代码之家 › 专栏 › 技术社区 › B_Osipiuk

使用jquery将mouseenter事件添加到数组中名为的所有输入

jquery-selectors input jquery javascript

1

B_Osipiuk · 技术社区 · 8 年前

我不知道如何调用我的函数来调用数组中包含名称的所有输入。我试过:

var names = ["name1", "name2"];
$(document).ready(function(){
  $('input[name=names[0]').on("mouseenter", function() {
     $(this).attr('title', 'This is the hover-over text');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Head</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<input type="text" name="name1"> <!--This should have title-->
<input type="text" name="name2"> <!--This should have title-->
<input type="text" name="name3"> <!--This should not have title--

我试着把第一个元素放在那里,但我甚至做不到。我对jquery(以及js)非常熟悉,所以解决方案可能是显而易见的。

5 回复 | 直到 8 年前

1

Mohammad DefenestrationDay 8 年前

使用 .filter() 过滤jquery选择器,然后向其添加事件侦听器。

var names = ["name1", "name2"];
$("input").filter(function(){
  return names.indexOf($(this).attr("name")) != -1;
}).on("mouseenter", function() {
  $(this).attr('title', 'This is the hover-over text');
});

var names = ["name1", "name2"];
$("input").filter(function(){
  return names.indexOf($(this).attr("name")) != -1;
}).on("mouseenter", function() {
  $(this).attr('title', 'This is the hover-over text');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name1" value="name1">
<input type="text" name="name2" value="name2">
<input type="text" name="name3" value="name3">

您还可以将事件侦听器添加到所有输入中,并在回调函数中检查它的名称。

var names = ["name1", "name2"];
$("input").on("mouseenter", function() {
  if (names.indexOf($(this).attr("name")) != -1){
    $(this).attr('title', 'This is the hover-over text');
  }
});

var names = ["name1", "name2"];
$("input").on("mouseenter", function() {
  if (names.indexOf($(this).attr("name")) != -1){
    $(this).attr('title', 'This is the hover-over text');
  }
});

<脚本src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></脚本>
<输入type=“text”name=“name2”value=“name2”>

2

mukesh kudi 8 年前

只需在数组上运行一个循环,并为每个包含input name的数组元素添加eventlistner。

$(document).ready(function(){
     $.each(names , function(index, item) {
       $("input[name="+ item +"]").on("mouseenter", function() {
         $(this).attr('title', 'This is the hover-over text');

   });
 });
});

3

1

D Lowther 8 年前

$(document).ready(function(){
    var names = ["name1", "name2"];
    
    // interpolation
    $(`input[name=${names[0]}]`).on("mouseenter", function() {
         $(this).attr('title', 'This is the hover-over text');
    });
    
    // or without interpolation
    $('input[name=' + names[1] + ']').on("mouseenter", function() {
         $(this).attr('title', 'This is different hover-over text');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="name1" />
<input type="text" name="name2" />

4

0

SuperStar518 JamesE 8 年前

试试这个:

$("input[name^='name'").on("mouseenter", function() {
...

参考URL: https://api.jquery.com/attribute-starts-with-selector/

5

0

Tom O. 8 年前

var names = ["name1", "name2"];

//Iterate over all the text box inputs in your HTML
document.querySelectorAll('[type=text]').forEach(function(el) {
  //Check if el name attribute is in the array
  if (names.indexOf(el.name) > -1) {
    //If so, add a change event listener
    el.addEventListener('keyup', function(e) {
      //Set the title attribute to something new
      updateTitle(el, e);
    });
  }
});

function updateTitle(el, e) {
  el.title = e.target.value;
  console.log(`Updated ${el.name}: title attribute changed to ${el.title}`);
}

<h2>Head</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<input type="text" name="name1">
<!--This should have title-->
<input type="text" name="name2">
<!--This should have title-->
<input type="text" name="name3">
<!--This should not have title-->