根据表单字段单击更改div内容

时间：2016-06-10 00:16:44

标签： javascript jquery html

我试图在用户点击表单字段时在页面右侧显示文本。每次点击不同的字段，我正在寻找文本在同一个div中更改与该字段的信息。我试过这个，但它似乎不起作用：

<html>
<head>  
<script>

$('#img1').click(function() {
  $('#aum').html('Text 1');
});

$('#img2').click(function() {
  $('#aum').html('Text 2');
});

$('#img3').click(function() {
  $('#aum').html('Text 3');
});

</script>
</head>
<body>
<form>
<input type="text" id="f1" name="f1"/>
<input type="text" id="f2" name="f2"/>
<input type="text" id="f3" name="f3"/>
<input type="submit" value="submit">
</form>

<div id="aum"></div>

</body>
</html>

1 个答案:

答案 0 :(得分：2)

添加点击处理程序onload

$( function(){
   // this is jQuery's shorthand for document.onload
});

检查您的ID

您的代码引用$("#img1")，但该ID不存在任何元素。

最小变更解决方案

https://jsfiddle.net/8h7fwjbc/

$(function(){  // document onready
    $('#f1').click(function() {
      updateAum('Text 1');
    });

    $('#f2').click(function() {
      updateAum('Text 2');
    });

    $('#f3').click(function() {
      updateAum('Text 3');
    });
});

function updateAum(content) {
    $('#aum').html(content);
}

更好的解决方案，使用数据标签

https://jsfiddle.net/8h7fwjbc/1/

HTML

<form>
<input type="text" id="f1" name="f1" data-aum="Text 1"/>
<input type="text" id="f2" name="f2" data-aum="Text 2"/>
<input type="text" id="f3" name="f3" data-aum="Text 3"/>
<input type="submit" value="submit">
</form>

<div id="aum"></div>

JS

$(function(){  // document onready
    $('[data-aum]').click(function() {
      updateAum( $(this).attr('data-aum') );
    });
});

function updateAum(content) {
    $('#aum').html(content);
}