Получение текста из элемента с тем же именем класса с помощью jQuery

Question

Получение текста из элемента с тем же именем класса с помощью jQuery

0

У меня есть небольшое приложение перетаскивания, которое я создал. Он работает нормально, но есть небольшая проблема, когда я перетаскиваю элемент в недоступное место.

Он должен получить текст из HTML (который есть) и обновить другой div, чтобы показать пользователю, что они перетащили.

К сожалению, он всегда возвращает одно и то же имя, независимо от того, какой элемент списка вы перетаскиваете. Это первый в списке, поэтому первый экземпляр этого класса.

В любом случае, мы можем получить правильную метку для перетаскиваемого элемента?

Вот мой jQuery

$(function() {
    $( ".drag_me" ).draggable({ revert: "invalid" });
    $( ".choc2_bowl" ).droppable({
      drop: function( event, ui ) {
        $( this )

            var htmlString = $('.choc_label').html();
            $('.choc2_flavour').text( htmlString );

            ui.draggable.fadeOut(500);
      }
    });
  });

Вот список в моем HTML (это сокращено для этой демонстрации, но список динамический из БД.

<div class="choc2_select">
<ul>
<li class="drag_me"><div ><img src="RASPBERRY.png" /></div><div class="choc_label">Raspberries</div></li>
<li class="drag_me"><div ><img src="CHAMPAGNE.png" /></div><div class="choc_label">Strawberries</div></li>
<li class="drag_me"><div ><img src="DRIED-BLUEBERRIES.png" /></div><div class="choc_label">Blueberries</div></li>
<li class="drag_me"><div ><img src="CHAMPAGNE.png" /></div><div class="choc_label">Cranberries</div></li>
</ul>
</div>

Любая помощь будет принята с благодарностью!

Саймон

Simon Hume 13 март 2014, в 23:39

Источник

0

var htmlString = $ (this) .siblings ('. choc_label'). html (); это нормально?
Alen 13 март 2014, в 22:13
0

спасибо за быстрый ответ, хотя кажется, что он ничего не возвращает, div не обновляется с помощью 'choc_label'
Simon Hume 13 март 2014, в 22:16

Теги:

javascript

jquery

html

drag-and-drop

1 ответ

Ещё вопросы

var htmlString = $ (this) .siblings ('. choc_label'). html (); это нормально?
спасибо за быстрый ответ, хотя кажется, что он ничего не возвращает, div не обновляется с помощью 'choc_label'

Arun P Johny · Accepted Answer · 2014-03-13T21-12-00.000Z

Вам нужно настроить таргетинг на choc_label внутри перетаскиваемого элемента, поэтому используйте

$(".choc2_bowl").droppable({
    drop: function (event, ui) {
        var htmlString = ui.draggable.find('.choc_label').html();
        $('.choc2_flavour').text(htmlString);
        ui.draggable.fadeOut(500);
    }
});

отлично, работает как шарм, спасибо Арун