【发布时间】:2019-12-28 01:25:28
【问题描述】:
我正在执行foreach 循环,然后发送该数据。然后在我的 AJAX 函数中,我在成功函数中输出信息。这一切都很好。
但是,我只是调整了代码以包含一个新的data-attribute。这个data-attribute 包含$creator 变量。可以在这里看到:
$html .= '<div class="projectCont" data-current="'.$category.'" data-creator="'.$project_creator.'">';
正确的数据正在输出。
我遇到的问题是将活动类添加到容器中 - .projectCont 当数据属性 - data-creator 是客户时。
现在似乎只检查最后一个循环对象,然后不管它是什么,其余数据都在处理。
例如:我输出了大约 10 个循环对象。出于测试目的,我仅将其中一个的创建者更改为“客户” - 数据库中的最后一个。现在当所有这些循环和输出时,每条记录都有根据我的条件添加的类成功。
有人知道为什么会这样吗?我将此条件嵌套在每个函数中,认为它会检查和修改每个单独的记录。
有问题的条件(更多代码见 JS):
var projectCreator = $('.projectCont').data('creator');
if (projectCreator == 'Customer') {
$('.creatorIcon').addClass('active');
console.log("It should be showing");
} else {
$('.creatorIcon').removeClass('active');
}
JS:
success: function (data) {
//console.log(data);
if (data == null) {
alert("Unable to retrieve projects!");
alert(data);
} else {
var displayProjects = JSON.parse(data);
$wrapper.empty();
$(displayProjects).each(function() {
$wrapper.append(this.html);
//console.log(this.html);
var projectCreator = $('.projectCont').data('creator');
if (projectCreator == 'Customer') {
$('.creatorIcon').addClass('active');
console.log("It should be showing");
} else {
$('.creatorIcon').removeClass('active');
}
});
$wrapper.append(startBuilding);
}
PHP:
if ($projects_stmt = $con->prepare($projects_sql)) {
$projects_stmt->execute();
$project_rows = $projects_stmt->fetchAll(PDO::FETCH_ASSOC);
$proj_arr = array();
foreach ($project_rows as $project_row) {
$project_creator = $project_row['creator'];
$html = '';
$html .= '<div class="projectCont" data-current="'.$category.'" data-creator="'.$project_creator.'">';
$html .= '<div class="creatorIcon"><img src="/Projects/expand.png" alt="Customer Photo"></div>';
$html .= '</div>';
$data = array('id' => $project_row['id'], 'date' => $project_row['date_added'], 'html' => $html);
$proj_arr[] = $data;
}
}
echo json_encode($proj_arr);
更多JS:
$('.categoryList').on('click', function (event) {
$('#projectsWrap').addClass('active'); //Once a category is selected the project wrap section will show
$wrapper = $('#projectGallery');
category = $(this).data('category');
//console.log(category);
$.ajax({
url: '/php/projectLoadTest.php',
type: 'POST',
data: {
'category': category
},
success: function (data) {
//console.log(data);
if (data == null) {
alert("Unable to retrieve projects!");
alert(data);
} else {
var displayProjects = JSON.parse(data);
$wrapper.empty();
$(displayProjects).each(function() {
$wrapper.append(this.html);
//console.log(this.html);
var projectCreator = $('.projectCont').data('creator');
if (projectCreator == 'Customer') {
$('.creatorIcon').addClass('active');
console.log("It should be showing");
} else {
$('.creatorIcon').removeClass('active');
}
});
$wrapper.append(startBuilding);
}
},
error: function (xhr, textStatus, errorThrown) {
alert(textStatus + " | " + errorThrown);
alert('There are currently no project images for this selection');
}
});
//was here
});
【问题讨论】:
-
可能有不止一个元素匹配
.projectCont选择器。你需要找到一种新的方法来定位相关元素,而不是使用匹配许多元素的选择器。 -
@Iwrestledabearonce。使用
$this函数会成为这样做的诀窍吗?顺便说一句,很棒的用户名。 -
我需要查看更多代码。我不知道
this与您提供的内容有什么关系。 -
@Iwrestledabearonce。我在我的问题中添加了更多 JS(在底部)。
-
尝试使用事件目标...
var projectCreator = $(event.target).data('creator');因为this将引用成功回调中的其他内容。
标签: javascript jquery json each