Jquery 选择一个 img 并提交它。 （形式构造）

Posted 2023-05-09

【中文标题】Jquery 选择一个 img 并提交它。 （形式构造）

【英文标题】：Jquery Select an img and submit it. (form construction)

【发布时间】：2013-04-10 11:38:24

【问题描述】：

这是我的问题，我想选择一张图片并使用 jquery 提交，所以我有不同的图片，我选择一个并提交。

所以我的想法是，当我单击 LabBox 中的某些图像时，例如，“images/dontlike_OFF.png”，我创建一个选择属性（$(this).attr('select', 'true');，稍后，当我单击 sendLabForm 我想使用选择器$(#LabBox img[attribute=Value]) 获取我单击的图像的名称。

我认为创建属性的想法很奇怪，但我确实可以看到，在 firebug 上，确实创建了该属性，问题只是当我想使用所选属性获取该 img 的名称时。

所以，我的问题是：为什么这是不可能的？ 当我点击提交按钮而不使用通常的 html 表单时，有什么方法可以获取我选择的 img 的名称？

<div id='LabBox'>
    <img  name="dlike" src="images/dontlike_OFF.png"/>
    <img  name="check" src="images/check_OFF.png"/>
    <img  name="funny" src="images/funny_OFF.png"/>
    <img  name="gidea" src="images/idea_OFF.png"/>
    <img  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>

【问题讨论】：

select 不是有效属性，也不是为 img 标签选择的。您应该在现代浏览器上使用数据。

像什么？全局变量？

【参考方案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(','));
 );

【讨论】：

Derek_Henderson 解决方案似乎确保了浏览器的互操作性。但是我相信 roadted 解决方案更有效，因为 .data() 可以“存储与匹配元素关联的任意数据或返回命名数据中的值”（API Documentation）除了只能在现代浏览器上运行。非常感谢你们。你在这次讨论中帮了我很多忙

【参考方案2】：

您应该做的是创建与图像关联的复选框列表（或使用 data 属性，如下所述）。如果您希望用户单击图像，您可以隐藏复选框，只需在图像和复选框之间创建关联。提交表单时，复选框值中的图片url字符串被提交。

你应该不做的是发明属性。

【讨论】：

是的，我已经看到隐藏复选框的技术，在我的情况下是单选按钮表单，但是没有其他选项可以隐藏表单？顺便谢谢你的回答。

好吧，如果你想避免创建复选框，你可以像@roasted 建议的那样，为每个图像创建 .data('selected') 。然后，当您提交时，发送那些具有 .data('selected') 的图像。但是如果你有一个提交按钮，想必你有一个表单，那为什么不走那条路呢？

起初我投了反对票，因为与无关标记相比，data-* 属性或简单的 js 数组或哈希是更好的数据存储......但后来我撤回了，因为你可以说服我它在表单提交的上下文中可能被认为是合适的。

嗯，为什么要投反对票？它可能不是首选答案，但它肯定是一个有效的答案，尤其是在表单提交的上下文中（这是问题所在的上下文）？ （@KevinC.，这不是针对你，因为你说你撤回了你的反对票。）

@DerekHenderson ，我已经向你投了赞成票！肯定不是我。就像我之前说的，我非常感谢您的参与。

【参考方案3】：

为什么不简单地给选定的图像一个类别？

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

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

【参考方案4】：

这是我的问题的解决方案。实际上你可以创建属性，你只需要指定.attr() 方法来获取它们。

这确实有效。

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

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


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

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

    );

目前我认为这种方法没有任何缺点，但如果您发现这种方法有任何问题，请告诉我。

【讨论】：

问题在于这是使用非标准属性。您应该使用 $.data() 方法，或者至少根据规范将属性命名为“data-select”。有关为什么 $.data() 更可取的更多信息，请参阅此答案：***.com/a/7262427/193494

重申一下，如果您不打算采用表单控件，.data() 是您的最佳选择。此外，.prop() 优于 .attr()。你不应该发明非标准属性。