Question

尝试获取文本框值并显示在文本框字段

上方的h3元素中

以下是我的HTML代码：

 <div class="clonedInput" id="add_attribute" style="display: block;">
    <div id="add_attributes">
      <div id="accordion1">
        <h3>
          <input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
          <strong class="attribute_name">**Here Text box value should be displayed**</strong> </h3>
          <table cellspacing="0" cellpadding="0" id="attribute_data" class="">
          <tbody>
            <tr>
              <td class="attribute_name"><label>Name:</label>
                <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
              </td>
              <td rowspan="3"><label>Value(s):</label>
                <textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="clonedInput" id="add_attribute_2" style="display: block;">
    <div id="add_attributes" class="woocommerce_attribute wc-metabox ">
      <div id="accordion1">
        <h3>
          <input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
          <strong class="attribute_name"></strong> </h3>
          <table cellspacing="0" cellpadding="0" id="attribute_data" class="">
          <tbody>
            <tr>
              <td class="attribute_name"><label>Name:</label>
                <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
              </td>
              <td rowspan="3"><label>Value(s):</label>
                <textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="clonedInput" id="add_attribute_3" style="display: block;">
    <div id="add_attributes" class="woocommerce_attribute wc-metabox ">
      <div id="accordion1">
        <h3>
          <input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
          <strong class="attribute_name"></strong> </h3>
          <table cellspacing="0" cellpadding="0" id="attribute_data" class="">
          <tbody>
            <tr>
              <td class="attribute_name"><label>Name:</label>
                <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
              </td>
              <td rowspan="3"><label>Value(s):</label>
                <textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

我正在尝试获取输入字段值<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">并将值显示在“

中

<h3>
          <input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
          <strong class="attribute_name">"**Here the text box value"</strong> </h3>

“关于模糊功能，这是动态文本框

我的Jquery：

$( "input" ).blur(function() {
            var string = $(this).val();
            $(this).parent().append(string);
        });

Answer 1

我在h3中添加了一个id属性，用于显示它，并将其用作模糊事件回调的参考： DEMO HERE

<强> HTML

<strong class="attribute_name" id="output">**Here Text box value should be displayed**</strong> </h3>

<强>的jQuery

$("input").blur(function () {
    var string = $(this).val();
    $('#output').html(string);
});

Answer 2

如果您要将文本框值替换为**Here Text box value should be displayed**，请尝试以下操作：

$( "input" ).blur(function() {
    var string = $(this).val();
    $(".attribute_name").text(string);
});

Answer 3

在此处查看有效的演示：http://jsfiddle.net/wPCZ5/

您需要在处理程序中执行此操作：

$(this).closest('div').find('h3 > strong').html(string);

使所有文本框都能正常工作。 closest()调用查找DOM层次结构并返回第一个匹配元素。在你的情况下，它是手风琴div。然后find()调用向下查看匹配元素的DOM层次结构。最后，html()用提供的字符串替换元素中的当前HTML。您对append()的原始调用会将字符串添加到已存在的字符串中。

Answer 4

这里有一个工作小提琴：http://jsfiddle.net/u63CU/但我认为你不应该像你一样重复使用类名和ID名。它可能会导致许多不需要的结果，因为jquery按id或类名选择。

<div class="clonedInput" id="add_attribute" style="display: block;">
    <div id="add_attributes">
      <div id="accordion1">
        <h3>
          <input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
          <strong id="text-value" class="attribute_name">**Here Text box value should be     displayed**</strong> </h3>
      <table cellspacing="0" cellpadding="0" id="attribute_data" class="">
      <tbody>
        <tr>
          <td class="attribute_name"><label>Name:</label>
            <input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
          </td>
          <td rowspan="3"><label>Value(s):</label>
            <textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

$( "#attribute_name" ).blur(function() {
    var string = $(this).val();
    $('#text-value').text(string);
});

Answer 5

尝试这样的事情

    $( "input" ).blur(function() {
           $(this).closest('strong.attribute_name').text(this.value);
       });

获取文本框值并将其显示在h3元素中

5 个答案: