将JS/css信息传递到表单的最佳方式

Best way to pass JS/ css info to a form

本文关键字：表单 最佳 方式 JS css 信息      更新时间：2023-09-26

我相信这很容易，我只是一个巨大的傻瓜。我在PHP页面上有一个表单，它有一些普通的表单元素（1个文本区域，1个文本字段）。

我还在页面上动态添加100个随机的小图像，我使用JQuery让某人选择或取消选择这些图像：

以下是循环100次以显示图像的html：

<div class='avatar'><img class='avatar_image' src='$this_profile_image' name='$thisfriend'></div>

这是Jquery：

<script type="text/javascript">
$(document).ready(function() {
        $(".avatar_image").click(function() {
                $(this).toggleClass("red");
        });
});
</script>

我想做的是，当表单提交时，让处理它的脚本能够判断这100张图像中的哪一张被选中（所以它的类将是"红色"而不是"avatar_image"）。我对此视而不见。

您需要为这些图像添加带有某种标识符的隐藏输入，并根据所选图像切换这些输入的状态。类似这样的东西：

Change your image markup:
<div class='avatar'>
   <img class='avatar_image' src='$this_profile_image' name='$thisfriend'>
   <input type="hidden" name="avatar_image[]" value="$this_profile_image" disabled="disabled" />
</div>

Change jQuery binding (and use event delegation, maybe pick a better container than document.body):
<script type="text/javascript">
$(function() {
        var selClass = 'red';
        $(document.body).on('click', ".avatar_image", function() {
                var $this = $(this);
                var $inp = $this.siblings('input[type="hidden"]');
                var isSelected = $this.hasClass(selClass), willBeSelected = !isSelected;
                $this.toggleClass(selClass);
                if(willBeSelected) {
                    $inp.removeAttr('disabled');
                } else {
                    $inp.attr('disabled', 'disabled');
                }
        });
});
</script>

Read the submitted data in PHP (assuming you're submitting via a POST form):
$selectedImages = $_POST['avatar_image'];

为每个图像添加一个ID，当它点击时获取ID，然后将其注入隐藏的文本字段

<input type="hidden" name="avatar" id="avatar" value="" />

$(".avatar_image").click(function() {
     $(this).toggleClass("red");
     //assign its id to the hidden field value
     $("input[name='avatar']").attr('value', $(this).attr('id')); 
     // pass that to your DB 
});

我推测您使用ajax将这些数据抓取回

success : function(callback){
     $("image[id*='"+callback.avatar+"']").addClass('red');
}

试试这个

PHP：将朋友的id添加到您拥有的html中

<div class='avatar'>
    <img class='avatar_image' src='$this_profile_image' name='$thisfriend' data-id='$thisFriendsId>
</div>

JS：创建一个空数组。使用每个函数将选定的id推送到您的数组中。然后使用post提交到您的php。

selected = [];
$(function(){
    $(".avatar_image").click(function() {
        $(this).toggleClass("red");
    });
    $('.submit').click(function(){
        $('.red').each(function(){
            var selectedId = $(this).data('id');
            selected.push(selectedId);       
        });
    $.post ('http://mysite.com/process.php', selected, function() { alert('succes!'); });
    });
​});​
相关文章：