Question

我正在为客户编写竞赛应用程序。

说明
我在页面上有三张图片。用户必须选择一张图片，“选择”它并点击“我想参加”。之后，他将被重定向到一个表格。（简单的部分）。

我的问题：
我如何实现，如果用户点击三张图片中的一张，图片将是“已选择的”/已选择焦点。
如果已选择图片，则提交按钮才能正常工作之后，我需要“提交”/将所选图片（通过id或类或数据属性）发送到下一页，并检查它是否是正确的图片。

我该怎么做？通过“样式”复选框或通过jQuery？
谢谢你的提示。

编辑：
我认为，这是我的意思，它的工作正常。有什么建议？

HTML：

<img src="http://placekitten.com/50/50" id="first"><br/>
<img src="http://placekitten.com/50/50" id="second"><br/>
<img src="http://placekitten.com/50/50" id="third"><br/>
    <input type="hidden" name="result" value="" id="hiddenresult" />
    <button name="submit" id="submit">Submit</button>

JS：

$('#first, #second, #third').click(function(){      
         $('#hiddenresult').attr('value', $(this).id);
        $(this).css('border','1px solid red');
     });

小提琴： http://jsfiddle.net/vmV75/1/

我的“新”问题是：
我怎样才能让所选元素成为边框，而不是全部。当选择新的img时，我需要设置旧的border = none。我错过了什么？

Answer 1

将图像设置为单选按钮，并使用:checked伪选择器在所选图像周围添加边框。

样式复选框和单选按钮指南：http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

Answer 2

一个简单的解决方案是：

$('#first, #second, #third').click(function(){      
         $('#hiddenresult').attr('value', $(this).id);
        $('#first, #second, #third').css('border','');
        $(this).css('border','1px solid red');
     });

更好的解决方案是在其上创建一个类和样式：

$('#first, #second, #third').click(function(){      
             $('#hiddenresult').attr('value', $(this).id);
            $('#first, #second, #third').removeClass('selected');
            $(this).addClass('selected');
         });

和css：

img.selected{
   border:1px solid red
}

JQuery - 通过单击表单来关注

2 个答案: