Question

我想将div .item的值分配给没有名称，ID和类的空文本框。再次模糊输入时，value会返回div .item。

$(document).on("click", ".item", function() {
    $(this).hide();
    $(".input-active input[type='text']").val($(this).text()).focus();
});
$(document).on("blur", ".input-active input[type='text']", function() {
    $('.item').show();
    $('.item').text($(".input-active input[type='text']").val());
    $(".input-active input[type='text']").val('');
});

Fiddle

Answer 1

使用.prev()，获取匹配元素集中每个元素的前一个兄弟。如果提供了选择器，则仅当它与该选择器匹配时才会检索前一个兄弟。

和

.next()，获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

＆＃13;

$(document).on("click", ".item", function() {
  $(this).hide();
  $(this).next("input[type='text']").val($(this).text()).focus();
});
$(document).on("blur", ".input-active input[type='text']", function() {
  $(this).prev('.item').show();
  $(this).prev('.item').text(this.value);
  $(this).val('');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="input-active">
  <div class="item">editing text</div>
  <input type="text">
</div>
<div class="input-active">
  <div class="item">editing text</div>
  <input type="text">
</div>
<div class="input-active">
  <div class="item">editing text</div>
  <input type="text">
</div>
<div class="input-active">
  <div class="item">editing text</div>
  <input type="text">
</div>
<div class="input-active">
  <div class="item">editing text</div>
  <input type="text">
</div>
<div class="input-active">
  <div class="item">editing text</div>
  <input type="text">
</div>

＆＃13;

Fiddle Demo

Answer 2

$( document ).ready(function() {
    $(document).on("click", ".item", function () {
      $(this).hide();
      $(".input-active input[type='text']").val($(this).text());
    });

    $(document).on("blur", ".input-active input[type='text']", function () {
     $('.item').show();
     $('.item').text($(this).val());
     $(this).val('');
    });
});

Answer 3

$('input').bind('keyup keypress blur change focus click keydown', function (e,  param) {
var $this = $(this);
var value = $this.val();
}

上面的代码将为所有输入控件提供所有事件的值....

Answer 4

你需要使用closest或parents找到相关输入/项目的父母，你应该添加条件来检查空案例：

$(document).on("click", ".item", function() {
  $(this).hide();
  $(this).closest(".input-active").find("input[type='text']").val($(this).text()).focus();
});

$(document).on("blur", ".input-active input[type='text']", function() {
  var related_item = $(this).closest(".input-active").find('.item');

  if($(this).val()!=""){
    related_item.text($(this).val()).show();
    $(this).val('');
  }
});

希望这有帮助。

段

＆＃13;

$(document).on("click", ".item", function() {
  $(this).hide();
  $(this).closest(".input-active").find("input[type='text']").val($(this).text()).focus();
});

$(document).on("blur", ".input-active input[type='text']", function() {
  var related_item = $(this).closest(".input-active").find('.item');

  if($(this).val()!=""){
    related_item.text($(this).val()).show();
    $(this).val('');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-active">
  <div class="item">editing text1</div>
  <input type="text"/>
</div>
<div class="input-active">
  <div class="item">editing text2</div>
  <input type="text"/>
</div>
<div class="input-active">
  <div class="item">editing text3</div>
  <input type="text"/>
</div>

＆＃13;

如何在没有jquery中的id和class的情况下将div的值赋给未命名的文本框

4 个答案:

Fiddle Demo

段