Jquery - поиск альтернативного текста для текущего изображения

Question

Использование пользовательского интерфейса Jquery для создания формы, в которой при перетаскивании изображения на вход текст alt анализируется как значение ввода.

У меня это нормально работает для 1 изображения, но я хочу сделать так, чтобы оно вытягивало текущее изображение (чтобы мне не приходилось указывать идентификаторы всех изображений). Смотрите скрипт ниже:

<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( " " );
    }
});

определение teamname вне функции сбрасывания устанавливает ее определение первым .helmet, который она находит.

Answer 2

Поскольку у вас есть несколько перетаскиваемых элементов, вам будет проще использовать класс вместо идентификатора.

<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>