jQuery使用keyup(）检测两个元素上的更改

jQuery detecting changes on two elements using keyup()

本文关键字：元素 两个 使用 keyup 检测 jQuery      更新时间：2023-09-26

HTML:

<form>
    <input type="text" id="target" placeholder="example.com">
    <input type="checkbox" name="http" id="http" value="http"> http://
</form>
<div id="possible-targets">
    <h4>Possible matches: </h4>
</div>

JS:

var target_value;
$(window).load(function () {
    $('#target').keyup(function () {
        target_value = $('#target').val();
        if (target_value == '') {
            $('#target-match').remove();
        } else if ($('#target-match').length == 0) {
            $('#possible-targets').append('<h4><span id="target-match">' + target_value + '</span></h4>');
        } else if ($('#target-match').length != 0) {
            $('#target-match').html(target_value);
        }
        if ($('#http').prop('checked')) {
            if ($('#target-match-h').length == 0) {
                $('#possible-targets').append('<h4><span id="target-match-h">http://' + target_value + '</span></h4>');
            } else {
                $('#target-match-h').html('http://' + target_value);
            }
        } else {
            $('#target-match-h').remove();
        }
    });
});

以下是一个JSFiddle：http://jsfiddle.net/h2Uw4/

现在，当我开始在文本输入字段中键入时，我可以在possible-targetsdiv中看到实时更改，但当我单击http://复选框时，它仍然需要在文本输入域中至少再键入一个字符，以进行实时更改并添加另一个可能的目标。

我尝试在#target(文本输入(和#http(复选框(上使用keyup()，但没有成功：

$('#target, #http').keyup()

创建一个函数并将其传递给事件处理程序。

示例代码

var yourFunc = function () {
       //Your code
};
$('#target').keyup(yourFunc);
$('#http').change(yourFunc);

演示

根据@DavidThomas的评论，您也可以使用

$('#target, #http').on('change keyup', yourFunc)

演示2

试试这个

  var target_value;
$(window).load( function() {
    $('#target').keyup(function() {
        target_value = $('#target').val();
        if(target_value == '') {
            $('#target-match').remove();
        } else if($('#target-match').length == 0) {
            $('#possible-targets').append('<h4><span id="target-match">' + target_value + '</span></h4>');
        } else if($('#target-match').length != 0) {
            $('#target-match').html(target_value);
        }
        if($('#http').prop('checked')) {
            if($('#target-match-h').length == 0) {
                $('#possible-targets').append('<h4><span id="target-match-h">http://' + target_value + '</span></h4>');
            } else {
                $('#target-match-h').html('http://' + target_value);
            }
        } else {
            $('#target-match-h').remove();
        }
    });
    $('#http').click(function(){
        if ($('#target').val() !== "")
        if (this.checked === true) {
            $('#possible-targets').html('<h4>Possible matches: </h4><h4><span id="target-match-h">http://' + target_value + '</span></h4>');
        } else {
            $('#possible-targets').html('<h4>Possible matches: </h4><h4><span id="target-match-h">' + target_value + '</span></h4>');
        }
    });
});

当复选框的值更改时，您将不得不执行回调功能。请将js更新为：

var target_value;
$(window).load( function() {
    $('#target').keyup(displayMatches);
    $('#http').change(displayMatches);
});    
function displayMatches() {
    target_value = $('#target').val();
    if(target_value == '') {
        $('#target-match').remove();
    } else if($('#target-match').length == 0) {
        $('#possible-targets').append('<h4><span id="target-match">' + target_value + '</span></h4>');
    } else if($('#target-match').length != 0) {
        $('#target-match').html(target_value);
    }
    if($('#http').prop('checked')) {
        if($('#target-match-h').length == 0) {
            $('#possible-targets').append('<h4><span id="target-match-h">http://' + target_value + '</span></h4>');
        } else {
            $('#target-match-h').html('http://' + target_value);
        }
    } else {
        $('#target-match-h').remove();
    }
}

更新的fiddle

相关文章：