Question

不太清楚如何描述这一点，但我在这里。

用户将向表单添加信息。提交后，数据将填充20个div中的一个。随后，当用户返回此页面时，他们可能会点击div并以与他们用于输入数据的相同形式显示此信息，允许他们对其进行编辑。

我正在寻找一种解决方案，当用户使用触发事件时，他们点击的二十分之一的div将该div中的数据返回给表单。因此，如果我点击div 5，它会从'div_5'返回数据并将其显示在输入表格中。

为此，请使用jQuery和HTML。

以下是该页面的链接：Click on 'Buzz' when you get there.site.

Answer 1

我没有对此进行过测试，我将假设您的输入字段有一个名为inputBox的ID。你可以为每个div注册以下onclick处理程序，将div的值放在输入框中。这个例子假设这是第五个div的onclick处理程序，其id为div5

$("#inputBox").val($("#div5").text())

它应该像这样简单，但作为免责声明，我实际上没有在这个答案中测试代码片段。

Answer 2

以下代码经过测试，可在Firefox（通过控制台）的网站上运行：

( function( global )
{
    var $ = global.jQuery;

    $( function()
    {
        var $TargetForm = $( 'div.add_buzz_item form' ).eq( 0 ),
            /*
             * EXTREME inefficiencies on the next 4 lines due to lack of specificity in your markup
             */
            $TitleInput = $TargetForm.find( 'div:contains("Title:")' ).next().find( 'input' ),
            $ImageInput = $TargetForm.find( 'div:contains("Image:")' ).next().find( 'input' ),
            $LinkInput = $TargetForm.find( 'div:contains("Link:")' ).next().find( 'input' ),
            $DescriptionInput = $TargetForm.find( 'div:contains("Description:")' ).next().find( 'textarea' );

        $( 'div.site_buzz_scroll' ).delegate( 'div.buzz_block', 'click', function()
        {
            var $BuzzItem = $( this );

            $TitleInput.val( $BuzzItem.find( 'div.buzz_title' ).html() );
            $ImageInput.val( $BuzzItem.find( 'div.buzz_icon img' ).attr( 'src' ) );
            $LinkInput.val( $BuzzItem.find( 'div.buzz_link' ).html() );
            $DescriptionInput.val( $BuzzItem.find( 'div.buzz_desc' ).html() );
        } );
    } );
}( window ) );

如果你至少对你的表单字段进行了独特的命名，那么你就可以自己做一件大事，这样他们就可以更容易找到并定位。代码会更小，运行效率更高。也就是说，我尽可能高效地运行。我使用了.delegate()，因此您可以动态地将“buzz_blocks”添加到DOM中，而无需重新绑定它们。

使用onclick（jQuery / HTML）显示来自另一个div的数据

2 个答案: