флип-изображение с помощью jquery на кнопке?

Question

Я пытаюсь создать простую веб-приложение перетаскивания, используя jquery.

все до сих пор работает должным образом. теперь то, что я пытаюсь сделать, это добавить кнопку на страницу, поэтому, когда ее щелкнули, она будет FLIP выбранным изображением, и мне вообще не повезло.

Я создал jsfiddle, так что вы можете увидеть его для себя:http://jsfiddle.net/7btkn17q/8/

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

Мне нужно использовать эту кнопку, чтобы перевернуть изображение.

для этого я использовал это:

$('#flip').click(function(e){ 

    if($(e.target).closest(".drag").length > 0) { 
     $(e.target).closest("#droppable .drag img").css('border', 'solid 5px #000'); 


    } 

    }); 

, но это не оказывает никакого влияния на изображение (ы) на всех. Я знаю, что приведенный выше код не предназначен для перевода изображений (изображений). Я только что создал этот код в качестве теста, чтобы увидеть, могу ли я получить доступ к изображениям на кнопке без удачи.

Может кто-нибудь проконсультироваться по этому вопросу?

EDIT:

, хотя я думал, что это будет работать, это не так, и я так запутался, почему он не работает:

$('#flip').click(function(e){ 
    if($(e.target).closest(".drag").length > 0) { 
    $(e.target).closest("#droppable .drag").find('img').css('border','5px solid #000'); 
    }  
}); 

Второе редактирование:

I Я попытался использовать функцию remove(), чтобы узнать, могу ли я получить img, и несколько я мог бы заставить его работать, но, похоже на ответ ниже, он удалит ВСЕ img вместо того, чтобы удалять выбран только:

$(e.target).parent().siblings(".drag").find(".img").remove(); 

есть ли способ применить CSS или удалить() только в selected element?

Answer 1

При выборе изображения, вы можете установить класс к нему. Давайте добавим к нему selected. При выборе другого изображения мы просто удаляем класс selected из других элементов и добавляем его к тому, который мы только что выбрали.

Here's my fiddle

Еще одна проблема, которую я заметил, было то, что вы пытались проверить это путем изменения границы выбранного элемента. Когда вы нажимаете кнопку flip, изображение становится недоступным, а граница изменяется на medium none (помните, firebug/devtools - ваши друзья.). Таким образом, я изменил его, чтобы изменить свойство css, чтобы увидеть, что кнопка работает.

Возможно, вы захотите обновить с помощью jQuery 1.6, поскольку управление событиями намного проще с помощью функции .on().

Answer 2

'.closest()' только перемещается по дереву DOM; вам нужно сделать что-то вроде этого, чтобы предназначаться изображения:

$('#flip').click(function(e){ 
    if($(e.target).parent().siblings(".drag").length > 0) { 
    $(e.target).parent().siblings(".drag").find('img').css('border','5px solid #000'); 
    }  
}); 

обновленный jsfiddle: http://jsfiddle.net/7btkn17q/9/