Question

我当前正在制作一个动态网页，并尝试单击带有class = application的元素时运行多个功能。下面的代码可以工作，但是非常重复。

$(document).on("click", ".application", renderImage);
$(document).on("click", ".application", renderText);
$(document).on("click", ".application", renderCodeButton);
$(document).on("click", ".application", renderAppButton);

我试图将这些函数放在一个主函数中，并使用.on（）运行它，但是当我使用$（this）.attr提取信息时，将渲染函数嵌套在一个主函数中会破坏范围。

这是renderImage函数，尽管它们非常相似：

function renderImage () {
  $(".appPicture").empty();
  console.log(this);
  let applicationPic = $(this).attr("data-image")
  let img = $("<img>");
  img.addClass("appPic")
  img.attr("src", applicationPic);
  $(".appPicture").append(img);
}

是否可以通过单击事件来运行多个功能，还是在不影响范围的情况下将功能嵌套在母版中？

Answer 1

$(document).on("click", ".application", function(){
    let scope = this;
    renderImage(scope);
    renderText(scope);
    renderCodeButton(scope);
    renderAppButton(scope);
});

function renderImage (scope) {
    $(".appPicture").empty();
    console.log(scope);
    let applicationPic = $(scope).attr("data-image")
    let img = $("<img>");
    img.addClass("appPic")
    img.attr("src", applicationPic);
    $(".appPicture").append(img);
}

您可以做这样的事情

.on（）上的多个函数，而不会影响范围

1 个答案: