Question

我有一个模式形式可以更改照片的标题（图像下方的段落），我也尝试更改图像的ALT属性，但似乎无法实现。

这是我正在努力工作的jQuery

$(".edit").click(function() {
                var parent = $(this).parents('.item');
                var caption = $(parent).find('.labelCaption').html();
                $("#photoCaption").val(caption);
                $("#editCaptionDialog").dialog({
                        width: 450,
                        bgiframe: true,
                        resizable: false,
                        modal: true,
                        title: 'Edit Caption',
                        overlay: {
                            backgroundColor: '#000',
                            opacity: 0.5
                        },
                        buttons: {
                            'Edit': function() {
                                var newCaption = $("#photoCaption").val();
                                $(parent).find(".labelCaption").html(newCaption);
                                $(parent).find('img').attr('alt', newCaption);
                            }
                        }
                });
                return false;
            });

和HTML

<li class="item ui-corner-all" id="photo<? echo $images['id'];?>">
                        <div>
                            <a href="http://tapp-essexvfd.org/gallery/photos/<?php echo $images['filename'];?>.jpg" class="lightbox" title="<?php echo $images['caption'];?>">
                            <img src="http://tapp-essexvfd.org/gallery/photos/thumbs/<?php echo $images['filename'];?>.jpg" alt="<?php echo $images['caption'];?>" class="photo ui-corner-all"/></a><br/>
                            <p><span class="labelCaption"><?php echo $images['caption'];?> </span></p>
                            <p><a href="edit_photo.php?filename=<?php echo $images['filename'];?>" class="button2 edit ui-state-default ui-corner-all">Edit</a></p>
                        </div>
                    </li>

标题正在发生变化。

由于

更新

以下是editCaption的代码

<div id="editCaptionDialog" style="display: none;">
                        <p><strong>Caption:</strong> <input type="text" name="photoCaption" id="photoCaption"/></p>
                </div>

Answer 1

您确定没有尝试更改title属性吗？如果不禁用图片，则无法看到alt属性。

Answer 2

这是行不通的，因为有两个原因，请看Ben的答案，看看这是否是你想要的行为。目前你正在克隆jQuery对象，这一行：

var parent = $(this).parents('.item');

已经返回一个jQuery对象，所以通过$(parent)你正在克隆它。来自文档：

jQuery(jQuery object) - jQuery对象 - 要克隆的现有jQuery对象。

要解决此问题，请执行以下操作：

parent.find(".labelCaption").html(newCaption);
parent.find('img').attr('alt', newCaption);

另外，我会将$(this).parents('.item');更改为$(this).closest('.item');以使其更安全。

使用jQuery更改图像的ALT值

2 个答案: