Jquery Выберите изображение и отправьте его. (форма строительства)

Question

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

Поэтому моя идея заключается в том, что, когда я нажимаю на какое-то изображение в моем LabBox, например, "images/dontlike_OFF.png", я создаю один атрибут select ($(this).attr('select', 'true');и позже, когда я нажму на sendLabForm я хочу получить имя изображения, на которое я нажал, с помощью селектора $(#LabBox img[attribute=Value]),

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

Итак, мой вопрос: почему это невозможно? Есть какой-то способ получить имя IMG, который я выбрал, когда я нажимаю кнопку отправки, не используя обычные HTML-формы?

<div id='LabBox'>
    <img alt="dontlike" name="dlike" src="images/dontlike_OFF.png"/>
    <img alt="check" name="check" src="images/check_OFF.png"/>
    <img alt="funny" name="funny" src="images/funny_OFF.png"/>
    <img alt="idea" name="gidea" src="images/idea_OFF.png"/>
    <img alt="imp" name="imptt" src="images/imp_OFF.png"/>
 </div>   
    <script type="text/javascript">

        $("#LabBox img").click(function () {
                $(this).attr('select', 'true');     
            });

        $("#sendLabForm").click(function(){
            console.log($("#LabBox img[select='true']").name);     
        });


    </script>

Answer 1

Вы должны использовать data(), что-то вроде этого:

DEMO

$("#LabBox img").click(function () {
     $(this).data('select', true);
 });

 $("#sendLabForm").click(function () {
     var selectedImgs = [];
     $("#LabBox img").each(function () {
         $(this).data('select') ? selectedImgs.push(this.name) : false;
     });
     alert(selectedImgs.join(','));
 });

Answer 2

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

Чего не следует делать, так это придумывать атрибуты.

Answer 3

Почему бы просто не дать выбранным изображениям класс?

$('#LabBox img').click(function(e){
    $(this).toggleClass('active');
});

$('form').submit(function(){
    console.log( $('#LabBox img.active') );
});

Answer 4

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

Это действительно работает.

$("#LabBox img").click(function () {

        $(this).attr('select', true);
});


$("#sendLabForm").click(function(){

    console.log( $('#LabBox img[select="true"]').attr('name'));

    });

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