Question

我希望有人可以帮助我。我是jquery的新手。我想在一个页面上显示我的学生的照片，这样我就可以轻松地在场。我使用带有php的MySQL数据库。这很容易。

接下来，我设法创建了一个jquery脚本，所以当我点击每个图像时，该图像的边框会循环显示绿色，红色和黄色（in-out-late 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或late）设置每个隐藏字段值，并提交所有隐藏字段以将其放入我的数据库中。

希望我足够清楚！

先谢谢你的帮助!!

弗朗索瓦

Answer 1

这就是你想要的吗？

只需将类型更改为隐藏。

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 2

您可以使用这样的代码在点击hidden时更新相应的<li>字段 -

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

});

单击图像上隐藏字段中的循环值

3 个答案:

jsFiddle