Question

我有一个编辑图标，点击此图标会调用一个方法。在这种方法中，我将需要值和ID属性的值。我尝试用jquery以几种方式做到这一点，其中没有一种方法。

这是我的HTML：

<div class="col-sm-2">
    <div class="input-group">
        <input type="text" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly">
        <div class="input-group-addon">
            <span onclick="editUserInfo()"><i  class="fa fa-pencil" aria-hidden="true"></i></span>
        </div>
    </div>
</div>

点击跨度后，我想获取左侧输入字段的值及其ID（在这种情况下为＆＃34; phone＆＃34;）。< / p>

我尝试过但没有工作：

ID：

$('selector').closest('[id]')

对于值：

$(this).parent().find('.form-control').val();

当然，我尝试了很多变化，但没有任何效果（我对此很新）。

Answer 1

您需要传递已单击的当前元素（使用onclick="editUserInfo(this)"），这样您就可以将该元素用作函数内的引用。否则 - this变量将引用window对象（这不是您要查找的对象）。

在函数内部，您可以通过转到具有input.form-control类的父元素来找到input-group。

检查此示例：

＆＃13;

function editUserInfo(el) {
  input_element = $(el).parents('.input-group').find('input.form-control');
  console.log(input_element.attr('id'));
  console.log(input_element.val());
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-2">
  <div class="input-group">
    <input type="text" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly">
    <div class="input-group-addon">
      <span onclick="editUserInfo(this)"><i  class="fa fa-pencil" aria-hidden="true">click</i></span>
    </div>
  </div>
</div>

＆＃13;

我在click标记中添加了<span>文字仅供查看...

Answer 2

请注意，id中的document元素应该是唯一的。如果document中只有一个元素有id "phone"，那么您只需使用$("#phone")来选择元素。否则，在class元素处替换id <input>，然后使用

this.parentElement.previousElementSibling

在".input-group span" click事件处理程序中选择<input>元素，该元素是父.input-group-addon元素的上一个兄弟。

另请注意，<input>元素未在value设置html。

$(function() {
  $(".input-group span").on("click", function() {
    var input = $(this.parentElement.previousElementSibling);
    var data = {
      "id": input.attr("id"), // `.attr("class")`
      "value": input.val()
    };
    console.log(data);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-2">
  <div class="input-group">
    <!-- `id` should be unique, change to `class` if multiple `id` set to `"phone"` in `document` -->
    <input type="text" class="form-control" id="phone" placeholder="Enter Phone" readonly="readonly" value="123-456-7890">
    <div class="input-group-addon">
      <span><i class="fa fa-pencil" aria-hidden="true">click</i></span>
    </div>
  </div>
</div>

Answer 3

使用最近找到与给定选择器匹配的最近祖先然后使用find使用属性equals selector查找具有给定名称的输入。例

＆＃13;

<div class="options">
  <div class="phone">
     <label>Phone:</label>
     <input type="text" name="phone" value="1"/>
  </div>

＆＃13;

var val = $(this).closest("div.options").find("input[name='phone']").val();

获取最近输入字段的值和id

3 个答案: