Question

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

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

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

<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”）。我对此感到茫然。

Answer 1

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

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'];

Answer 2

为每张图片添加一个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');
}

Answer 3

试试这个

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!'); });
    });
});

将JS / css信息传递给表单的最佳方法

3 个答案: