Question

我是一名学生，最近正在独自学习 Python。下面是我的 HTML 页面的 JavaScript 代码的一部分。

let temp_html_0 = `<div class="card">
    <img class="card-img-top"
         src="${image}"
         alt="Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success" onclick="confirm()">Confirm</button>
        <button type="button" class="btn btn-danger" onclick="reject()">Reject</button>
    </div>
    <br/>
</div>
`

javascript 函数：

function confirm(){
    alert('confirmed?')
    let test = $(this).parent().parent().find(".card-img-top").attr("src");
    alert(test)
    window.location.reload()
}

我想做的是：

当用户点击 btn-success 按钮时，调用确认（）函数，并获取 img src（我的代码中的 ${image}）调用 AJAX。

我尝试了上面的代码，但没有奏效。如何获取 img src 值？

Answer 1

从您的评论中我看到 temp_html_0 将重复，那么为什么不使用具有唯一标识符（例如迭代索引）的子类并将其添加到您的图像类中，如下所示

<img class="card-img-top top-img-{index}">

然后您可以将该索引传递给您的函数并使用您的逻辑获取该元素。

Answer 2

您可以在 HTML 事件绑定 confirm(this) reject(this) 中传递按钮引用，然后您可以在两种方法中访问父级和图像 src，如下面的代码片段所示。

function confirm(btn) {
  var $btn = $(btn);
  var imgSrc = $btn.closest('.card').find('.card-img-top').attr('src');
  console.log(`confirmed - ${imgSrc}`);
}

function reject(btn) {
  var $btn = $(btn);
  var imgSrc = $btn.closest('.card').find('.card-img-top').attr('src');
  console.log(`rejected - ${imgSrc}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
    <img class="card-img-top" src="${image}" alt=" Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success" onclick="confirm(this)">Confirm</button>
        <button type="button" class="btn btn-danger" onclick="reject(this)">Reject</button>
    </div>
    <br />
</div>

Answer 3

问题的核心在于您使用了 onclick 属性。它的值是 confirm()，所以当它被激活时，它会调用函数但不以任何方式设置上下文。所以 this 将是 window（如果您不在 strict mode）。

快速解决方法是将函数定义修改为 function confirm(el){，将 HTML 修改为 onclick="confirm(this)"，以便访问作为参数单击的元素。这导致此代码：

function confirm(el){
    console.log('confirmed?')
    let test = $(el).parent().parent().find(".card-img-top").attr("src");
    console.log(test)
    //window.location.reload()
}

//////////////////////////////

const image = "foo";
const url = "bar";
const title = "baz";
const comment = "quux";

let temp_html_0 = `<div class="card">
    <img class="card-img-top"
         src="${image}"
         alt="Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success" onclick="confirm(this)">Confirm</button>
        <button type="button" class="btn btn-danger" onclick="reject()">Reject</button>
    </div>
    <br/>
</div>
`

$("#main").append(temp_html_0);

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="main"></div>

然而，更好的方法是使用 event binding on dynamically created elements 和 event delegation。它将使用正确的上下文执行函数，并进一步允许您仍然拥有单个事件处理程序，但您不会将 HTML 与 JavaScript 将使用的逻辑混合在一起。：

function confirm(){
    console.log('confirmed?')
    let test = $(this).parent().parent().find(".card-img-top").attr("src");
    console.log(test)
    //window.location.reload()
}

$("#main") // --> common ancestor for all your dynamic elements
  .on("click", ".btn-success", confirm);
//             ^^^^^^^^^^^^^^  ^^^^^^^ --> event handler to execute
//              ↳ element to monitor for clicks

function reject(){
    console.log('rejected?');
}

$("#main").on("click", ".btn-danger", reject);


//////////////////////////////

const image = "foo";
const url = "bar";
const title = "baz";
const comment = "quux";

let temp_html_0 = `<div class="card">
    <img class="card-img-top"
         src="${image}"
         alt="Card image cap">
    <div class="card-body">
        <a target="_blank" href="${url}" class="card-title">${title}</a>
        <p class="reason-comment">REASON : ${comment}</p>
    </div>
    <div class="button-result">
        <button type="button" class="btn btn-success">Confirm</button>
        <button type="button" class="btn btn-danger">Reject</button>
    </div>
    <br/>
</div>
`

$("#main").append(temp_html_0);

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="main"></div>

Answer 4

您可以像这样直接将图像src作为参数传递给confirm函数调用：

<button type="button" class="btn btn-success" onnclick="confirm(${image})">Confirm</button>

你可以在confirm函数里面得到这个参数值。

如何使用jQuery获得父母父母的孩子的价值？

4 个答案: