这里对前端编程非常陌生，如果我只是从概念上完全搞砸了这一点，我深表歉意！
我有一个 Flask 驱动的站点，其中有四个选择框，其中填充了表示行 ID 到数据库表中的值，每个选择都有一个关联的 img 和 ap。当用户从下拉列表中选择一个项目时，与该下拉列表关联的图像和段落应根据来自 AJAX 调用的信息进行更新。我已经在用户选择新选择后成功进行了 AJAX 调用。我遇到的问题是如何利用 getJSON 回调函数正确识别进行调用的 select 元素，以便我可以遍历 DOM 以找到它的兄弟 img 和 p。一旦我进入回调函数，似乎 $(this) 不再指代进行原始函数调用的元素，我很难弄清楚从哪里开始。大多数例子我'
<body>
<div>
<form action="./getfile" method="POST">
<div class="container">
{%for i in range(0, 4)%} <!-- Create 4 sets of selects/paragraphs/imgs -->
<div>
<label>Class {{ i + 1 }}</label>
<select class="job_id_option" id="job_id{{i + 1}}" name="job_id{{i + 1}}"> <!-- When this select changes, the sibling p and img should change based on an AJAX result -->
{% for job in jobs %}
<option value={{ job.id }}>{{ job.name }}</option>
{% endfor %}
</select>
<p id="job_details">Blah blah blah blah</p> <!-- this p's contents should change based on AJAX result -->
<img src="static/graphics/FIGHTER/idle.bmp" id="promoted_class_sprite"/> <!-- this img's src should change based on AJAX result -->
</div>
{% endfor %}
</div>
<label for="start_promoted">Start Promoted</label>
<input type="checkbox" id="start_promoted" name="start_promoted" value="True" checked>
<br>
<input type="submit" value="Get Patch" />
</form>
</div>
</body>
$(function(){
$(".job_id_option").change(function(){
$.getJSON($SCRIPT_ROOT + '/getclassdetails', {
job_id: $(this).val()
}, function(data) {
console.log("Retrieved from server: " + JSON.stringify(data));
$("p").filter("#job_details").html("You did it");
$("img").filter("#promoted_class_sprite").attr("src", "static/graphics/" + data.short_name + "/idle.bmp");
});
})
});
正如预期的那样，现在编写的代码正在使用给定的 id 成功更新页面上的所有段落和图像。我仍在考虑究竟如何回到在 AJAX 回调函数中进行函数调用的选择。我最初的想法是让 /getclassdetails AJAX 调用也返回传递给它的值，因此我可以让 jquery 查找具有该值的选择元素并更新任何匹配元素的兄弟元素。但是，在开始更改 python 后端函数以返回不需要的请求详细信息之前，我想更深入地挖掘并确定我是否遗漏或误解了回调函数的性质。有没有更聪明的方法来解决我正在尝试做的事情？
您不能在页面中重复元素 ID，因此请改为转换为类。
您想要的是遍历到<p>并且<img>在同一个 parent 中<div>。
您可以通过使用parent()和find()或使用next()为<p>
$(".job_id_option").change(function(){
const $div = $(this).parent(),
$para = $div.find('.job_details')// or $(this).next(),
$img = $div.find('.promoted_class_sprite')
$.getJSON($SCRIPT_ROOT + '/getclassdetails', {job_id: $(this).val()}, function(data) {
$para.html('...')
$img.attr('src'....
})
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句