Jquery選擇一個img並提交。 （表單構建）

Question

這是我的問題，我想選擇一個圖像並使用jquery提交，所以我有不同的圖像，我選擇一個並提交。

所以我的想法是，當我在我的LabBox一些圖像上單擊，例如，「圖像/ dontlike_OFF.png」，我創建一個選擇屬性附加傷害（$(this).attr('select', 'true');後來，當我在sendLabForm點擊我想的名字我使用選擇器點擊的圖像$(#LabBox img[attribute=Value])

我相信這個創建屬性的想法很奇怪，但我真的可以看到，在螢火蟲上，該屬性是真正創建的，問題只有當我想要以獲得與選定的屬性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

你應該做的是創建一個與圖像相關聯的複選框列表（或使用數據的屬性，如下面註釋）。如果您希望用戶單擊圖像，可以隱藏複選框，只需在圖像和複選框之間創建關聯。提交表單時，會提交複選框值中的圖像url字符串。

你應該怎麼做不是做的是發明屬性。

Answer 2

您應該使用數據（），類似的東西：

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 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')); 

    }); 

在這一刻我沒有看到這種方法的任何缺點，但如果您發現此方法的任何問題，請讓我知道。