Question

我是javascript的新手，尽管我试图进行研究，但我无法解决这个问题。如何跟踪div中输入的变化并触发追加到外部div？我的代码如下：

在＆＃34;待定＆＃34;附加h3曾经＆＃34; .image-value＆＃34;输入值有变化

<!-- APPEND <h3> -->
<h3>Best Overall Costume<div class="pending">Pending</div></h3>
<div>
  <div class="select-form">
    <img src="images/vote.jpg" data-value="image_value">
    <img src="images/vote.jpg" data-value="image_value2">
    <img src="images/vote.jpg" data-value="image_value3">
    <img src="images/vote.jpg" data-value="image_value4">
    <img src="images/vote.jpg" data-value="image_value5">
    <!-- Track the change of this input -->
    <input type="hidden" class="image-value" name="selected_image" value="">
  </div>
</div>

我试过了：

function changeStatus(statusValue) {
    $("input",".select-form").val(statusValue).trigger("change");
}

$("input",".select-form").change(function(){
    if (!$(this).val()){
        $("<div class='pending'>Pending</div>").appendTo($("h3").prev($(this)));
    }
});

但这似乎不起作用。有什么想法吗？

Answer 1

在你想要你的新div的地方放一个空div并给它一个id，即<div id='myDiv'><div>），然后追加你想要的东西。

$( "#myDiv" ).append( "<div class='pending'>Pending</div>" );

您还可以查看Append Explained

了解更多解释。

感谢。

Answer 2

我在这里做了几件事......首先，我不确定为什么你在命名函数中拥有它。当您使用通常没有必要的事件监听器时。

然后，我不知道val检查是为了什么，所以我改掉了它。

最后，我使用one()，只运行一次。这个案子似乎要求这样做。

$('.select-form').one('change', 'input', function () {
    if ( $(this).val() ) { alert('asdgf');
        $("<div class='pending'>Pending</div>")
            .appendTo($(this).parent().prev('h3'));
    }
});

Fiddle

Answer 3

试试这个：

$("input",".select-form").on("change", function(){
     var $this = $(this);
     if (!$this.val()){
            var elem = $('<h3>Best Overall Costume<div class="pending">Pending</div></h3>');                
            $this.parent().parent().before(elem);
     }
});

您还可以进行检查，如果已添加待处理的div，则不要再次添加。

当然这个解决方案假设目标div（在你想要追加之前）和输入控件之间没有其他嵌套的div

在输入父级之外追加div

3 个答案: