Question

使用Jquery UI创建一个表单，当您将图像拖动到输入时，alt文本将被解析为输入的值。

我对1张图片工作得很好，但是，我想让它为当前图像拉动（这样我就不必指定所有图像的ID）。请参阅以下脚本：

<script>    
    $(function() {
    var teamname = $(".helmet").attr("alt");

        $( "#draggable" ).draggable();
        $( "#draggable2" ).draggable();
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
                $( this )
                    .find( "input" )
                        .val("" + teamname + "");
                }
        });
        $( "#droppable" ).droppable({
            out: function( event, ui ) {
                $( this )
                    .find( "input" )
                        .val( " " );
                }
        });
    });
    </script>

这是HTML

<div id="draggable" class="ui-widget-content">
    <img src="team1.jpg" alt="Team Name 1" class="helmet">
</div>

<div id="draggable2" class="ui-widget-content">
    <img src="team2.jpg" alt="Team Name 2" class="helmet">
</div>

<div id="droppable" class="ui-widget-header">
    <input type="text" name="team" />
</div>

现在，无论是拖动第一张图像还是第二张图像，它只会抓取第一张图像的替代文字。任何帮助将不胜感激。

Answer 1

更改此功能哦，您可以添加out功能：

$( "#droppable" ).droppable({
    drop: function( event, ui ) {
        $( this )
            .find( "input" )
                .val("" + ui.helper.find('img').attr('alt') + "");
    },
    out: function( event, ui ) {
        $( this )
            .find( "input" )
                .val( " " );
    }
});

在droppable函数之外定义teamname会将其定义设置为它找到的第一个.helmet。

Answer 2

由于您有多个可拖动元素，因此在使用类而不是id时，事情会更容易。

<div class="ui-widget-content draggable">
    <img src="team1.jpg" alt="Team Name 1" class="helmet">
</div>

<div class="ui-widget-content draggable">
    <img src="team2.jpg" alt="Team Name 2" class="helmet">
</div>

<div id="droppable" class="ui-widget-header">
    <input id="team-name" type="text" name="team" />
</div>

<script type="text/javascript">
$(function() {

    $.each($( ".draggable" ), function() { $(this).draggable(); });

    $( "#droppable" ).droppable({

        drop: function( event, ui ) {
            $("#team-name").val($("img", ui.draggable).attr('alt'));
        },

        out: function( event, ui ) {
            $("#team-name").val("");
        }
    });
});
</script>

Jquery - 查找当前图像的Alt文本

2 个答案: