在下一页中，开始一个允许用户裁剪和保存图像的元素。它仅适用于循环中的第一个项目，但是对于后面的所有sql行，单击图像不会打开模态对话框。
我没有任何重叠标签，我已经彻底检查过了。我已经移动了js脚本标签，也没有任何改变。这有什么共同的原因吗？哪里是第一个排除故障的地方？在PHP中使用不同类型的循环会更好吗？
<?php
ob_start();
session_start();
require_once ('verify.php');
?>
<head>
<title>Edit Listings</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="../css/cropper.min.css" rel="stylesheet">
<link href="../css/crop-avatar.css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="head">
<ul id="menu">
</ul>
</div>
<div id="area"></div>
<div id="main_listings">
<h1 align="left">Edit listings page</h1>
<?php
include ("../dbcon2.php");
$conn = new mysqli($servername, $username, $password, $dbname);
$sql="SELECT * FROM listings ORDER BY date_added DESC";
$result = $conn->query($sql);
?>
<?php while ($data=mysqli_fetch_assoc($result)):
$id = $data['id'];
$id = $data['title'];
$listing_img = $data['listing_img'];
?>
<div id="edit_listing">
<div id="edit_left">
<div class="container" id="crop-avatar">
<div class="avatar-view" title="Change the avatar"> <img src="<?php echo $listing_img; ?>" alt="<?php echo $title; ?>"> </div>
<div class="modal fade" id="avatar-modal" tabindex="-1" role="dialog" aria-labelledby="avatar-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="avatar-form" method="post" action="edit-avatar.php" enctype="multipart/form-data">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="avatar-modal-label">Listing Main Image</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data" type="hidden">
<input name="avatar_id" type="hidden" value="<?php echo $id; ?>">
<label for="avatarInput">Local upload</label>
<input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
</div>
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3">
<div class="avatar-preview preview-lg"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button>
<button class="btn btn-primary avatar-save" type="submit">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="loading" tabindex="-1" role="img" aria-label="Loading"></div>
</div>
</div>
<div id="edit_right">
<form name="edit_date" action="edit_list.php" method="post" id="edit_list_data">
<input name="title" type="text" id="title" tabindex="1" value="<?php echo $title; ?>" size="60" maxlength="57"/>
<input type="hidden" name="id" value="<?php echo $id; ?>" />
<input type="submit" formaction="edit_list.php" value="Submit" />
</form>
</div>
</div>
<?php endwhile;$conn->close();?>
<div class="spacer"></div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="../js/cropper.min.js"></script>
<script src="../js/crop-avatar.js"></script>
</body>
</html><?php // Flush the buffered output.
ob_end_flush();
?>
js js
// Events
EVENT_MOUSE_DOWN = "mousedown touchstart",
EVENT_MOUSE_MOVE = "mousemove touchmove",
EVENT_MOUSE_UP = "mouseup mouseleave touchend touchleave touchcancel",
EVENT_WHEEL = "wheel mousewheel DOMMouseScroll",
EVENT_RESIZE = "resize" + CROPPER_NAMESPACE, // Bind to window with namespace
EVENT_DBLCLICK = "dblclick",
EVENT_BUILD = "build" + CROPPER_NAMESPACE,
EVENT_BUILT = "built" + CROPPER_NAMESPACE,
EVENT_DRAG_START = "dragstart" + CROPPER_NAMESPACE,
EVENT_DRAG_MOVE = "dragmove" + CROPPER_NAMESPACE,
EVENT_DRAG_END = "dragend" + CROPPER_NAMESPACE,
build: function () {
var $this = this.$element,
defaults = this.defaults,
buildEvent,
$cropper;
if (!this.ready) {
return;
}
if (this.built) {
this.unbuild();
}
$this.one(EVENT_BUILD, defaults.build); // Only trigger once
buildEvent = $.Event(EVENT_BUILD);
$this.trigger(buildEvent);
if (buildEvent.isDefaultPrevented()) {
return;
}
// Create cropper elements
this.$cropper = ($cropper = $(Cropper.TEMPLATE));
// Hide the original image
$this.addClass(CLASS_HIDDEN);
// Show and prepend the clone iamge to the cropper
this.$clone.removeClass(CLASS_INVISIBLE).prependTo($cropper);
// Save original image for rotation
if (!this.rotated) {
this.$original = this.$clone.clone();
// Append the image to document to avoid "NS_ERROR_NOT_AVAILABLE" error on Firefox when call the "drawImage" method.
this.$original.addClass(CLASS_INVISIBLE).prependTo(this.$cropper);
this.originalImage = $.extend({}, this.image);
}
this.$container = $this.parent();
this.$container.append($cropper);
this.$canvas = $cropper.find(".cropper-canvas");
this.$dragger = $cropper.find(".cropper-dragger");
this.$viewer = $cropper.find(".cropper-viewer");
defaults.autoCrop ? (this.cropped = TRUE) : this.$dragger.addClass(CLASS_HIDDEN);
defaults.dragCrop && this.setDragMode("crop");
defaults.modal && this.$canvas.addClass(CLASS_MODAL);
!defaults.dashed && this.$dragger.find(".cropper-dashed").addClass(CLASS_HIDDEN);
!defaults.movable && this.$dragger.find(".cropper-face").data(STRING_DIRECTIVE, "move");
!defaults.resizable && this.$dragger.find(".cropper-line, .cropper-point").addClass(CLASS_HIDDEN);
this.$scope = defaults.multiple ? this.$cropper : $document;
this.addListeners();
this.initPreview();
this.built = TRUE;
this.update();
$this.one(EVENT_BUILT, defaults.built); // Only trigger once
$this.trigger(EVENT_BUILT);
},
答案 0 :(得分：1)
问题的根源是双重的（此后可能还有其他问题）。
首先，您的HTML中有大量重复的ID值。
以下是一些重复项：edit_listing，container，edit_left，crop-avatar，avatar-modal等等。
给定ID只能在整个HTML文档中使用 一次 。所有这些id值都需要更改为类名（可以根据需要多次使用），然后需要更改引用它们的任何代码或CSS以引用类名，而不是ID值。 / p>
当您执行以下操作时，这会在您的代码中发挥作用：
new CropAvatar($("#crop-avatar"));
因为这是一个id引用，所以它只会选择页面中带有该id的第一个元素。因此，只有第一个列表处于活动状态。如果您将HTML更改为：
<div class="container crop-avatar">
然后，您可以使用类选择器.crop-avatar选择所有这些。
第二次，您的CropAvatar()构造函数只被调用一次，但它被编写为好像它只会在单个虚拟形象上运行。因此，您需要为每个商家信息单独调用CropAvatar()，或者您需要重写CropAvatar()，并且它的事件处理程序适用于所有商品而不只是一个。
如果你修复了所有重复的ID值，然后更改它，你可能会使现有的CropAvatar()构造函数工作：
var example = new CropAvatar($("#crop-avatar"));
到此：
$(".crop-avatar").each(function() {
new CropAvatar($(this));
});
这将为每个列表调用CropAvatar()构造函数。
这是我看到的前两个主要问题。我不能保证也没有其他事情要解决，但在前两个问题得到修复之前，这些问题是无法看到的。