单击图像时在隐藏字段中循环值

Question

我希望有人可以帮助我。我是 jquery 的新手。我想在一个页面上展示我的学生的照片，这样我就可以轻松地在场。我使用带有 php 的 MySQL DB 做到了这一点。这是最简单的部分。

接下来，我设法制作了一个 jquery 脚本，因此当我单击每个图像时，该图像的边框会在绿色、红色和黄色之间循环（输入 - 输出 - 后期 css 类）。

这是html代码（隐藏字段中的id是学号）

<div class="presences-container">
    <ul>
        <li class="presences-image in"><img src="7465.jpg">
        <input type="hidden" id="7465" name="presence2" value="in"/></li>
        <li class="presences-image out"><img src="9484.jpg">
        <input type="hidden" id="9484" name="presence3" value="in"/></li>
        <li class="presences-image late"><img src="2627.jpg">
        <input type="hidden" id="2627" name="presence4" value="in"/></li>
    </ul>
</div>

还有 jQuery

$(document).ready(function() {

$('li').toggle(
 function() {
 $(this).toggleClass('in out');
 $(this).removeClass('in');
 ;}, 
 function() {

 $(this).toggleClass('out late');
 $(this).removeClass('out');
 },
 function() {
 $(this).toggleClass('late in');
 $(this).removeClass('late');
 }
 );

});

现在，我想使用 jquery 根据图像的状态（在 ou 中或后期）设置每个隐藏字段值，并提交所有隐藏字段以将其放入我的数据库中。

希望我已经足够清楚了！

提前感谢您的帮助！！

弗朗索瓦

Answer 1

当<li>s 被点击时，您可以使用类似这样的代码来更新相应的hidden 字段 -

var hiddenid = $(this).find('img').attr('src').replace(".jpg",""); 
$("#" + hiddenid).val($(this).attr('class').split(' ').splice(-1));

然后您可以像这样序列化隐藏的输入值 -

vat hiddenvals = $("input[type=hidden]").serialize();

然后使用“post”或“ajax”方法将您的服务器发回给您。

Answer 2

这是你想要的吗？

只需将类型更改为隐藏。

Live demo

html：

<div class="presences-container">
<ul id="ulPics">
    <li class="presences-image in"><img src="7465.jpg">
    <input type="text" id="7465" name="presence2"/></li>
    <li class="presences-image out"><img src="9484.jpg">
    <input type="text" id="9484" name="presence3"/></li>
    <li class="presences-image late"><img src="2627.jpg">
    <input type="text" id="2627" name="presence4"/></li>
</ul>

js:

$("#ulPics li input").each(function(){
      $(this).val($(this).parents('li').attr("class").split(" ")[1]);
});

Answer 3

据我了解，这样的事情应该可以解决问题：

var states = $(['late','out','in']);

$('li').click(function() {

    var $this = $(this),
        $hiddenField = $this.find('input:hidden'),
        idx = $.inArray($hiddenField.val(), states);

    // update hidden field
    $hiddenField.val(states.get(--idx));

    // update li
    $this.removeClass('in out late').addClass($hiddenField.val());

});

jsFiddle