javascript - 获取焦点输入文本的值，将其连接到数据值，单击时将获取结果+ jquery

Question

首先我做了一个函数，当你聚焦它时，它会将该索引显示为输入类型：文本。接下来我制作 ap 标签，当您单击它时，它将获取 data-id 值。现在我想将索引值和 data-id 值的结果组合到我的 p 标签中，它的类名是“result”。当我尝试运行它时，它只会显示 data-id 值而不是索引值。似乎有什么问题..单击 jsfiddle 链接查看我的代码

function inputFocus(evename){
  $(evename).each(function(index){
    $(this).focus(function(){
      inpIndex = index;
      $('.dispIndex').val(inpIndex);
      // console.log( jQuery.type(zim_index));
    })
  });
}

inputFocus('.input_index');
inputVal = $(".dispIndex").val();

$(".p_names").each(function(){
  $(this).click(function(){
     dataId = $(this).data('id');
     resultHtml =  inputVal + dataId;
     $('.result').html(dataId);
  })
});

body {
    padding: 5px;
}

label {
    font-weight: bold;
}

input[type=text] {
    width: 20em
}

p {
    margin: 1em 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="selectstudents">
		<input type="text" class="dispIndex" name="">
		SELECT STUDENTS:<br>
		Id 1: <input type="text" class="input_index"><br>
		Id 2: <input type="text" class="input_index"><br>
		Id 3: <input type="text" class="input_index"><br>
		Id 4: <input type="text" class="input_index"><br>
	</div>
	<div class="selectstudents_result">
		<p data-id='A' class="p_names">click meA</p>
		<p data-id='B' class="p_names">click meB</p>
		<p data-id='C' class="p_names">click meC</p>
		<p data-id='D' class="p_names">click meD</p>
	</div>
    <p class='result'></p>

标签： javascriptjquery

Answer 1

您应该附加resultHtml到类和单击事件dataId的位置。.resultinputVal = $(".dispIndex").val();

function inputFocus(evename){
  $(evename).each(function(index){
    $(this).focus(function(){
      inpIndex = index;
      $('.dispIndex').val(inpIndex);
      // console.log( jQuery.type(zim_index));
    })
  });
}

inputFocus('.input_index');


$(".p_names").each(function(){
  $(this).click(function(){
  	 inputVal = $(".dispIndex").val();
     dataId = $(this).data('id');
     resultHtml =  inputVal + dataId;
     $('.result').html(resultHtml);
  })
});

body {
    padding: 5px;
}

label {
    font-weight: bold;
}

input[type=text] {
    width: 20em
}

p {
    margin: 1em 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="selectstudents">
		<input type="text" class="dispIndex" name="">
		SELECT STUDENTS:<br>
		Id 1: <input type="text" class="input_index"><br>
		Id 2: <input type="text" class="input_index"><br>
		Id 3: <input type="text" class="input_index"><br>
		Id 4: <input type="text" class="input_index"><br>
	</div>
	<div class="selectstudents_result">
		<p data-id='A' class="p_names">click meA</p>
		<p data-id='B' class="p_names">click meB</p>
		<p data-id='C' class="p_names">click meC</p>
		<p data-id='D' class="p_names">click meD</p>
	</div>
    <p class='result'></p>