1

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

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

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

我怎样才能做到这一点？通过“样式化”复选框还是通过 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 时，我需要设置旧边框 = none。我错过了什么？

4

2 回答 2

1

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

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

于 2013-04-13T23:28:17.313 回答
0

一个简单的解决方案是：

$('#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
}
于 2013-04-14T03:15:51.397 回答