如何使用JavaScript点击div时获取其内部描述替换iframe下方的LOADING文本

解决方法 #

你只需要在现有脚本的点击事件中新增读取点击项子级描述、替换弹窗描述的逻辑即可，以下是修改后的完整代码：

<script>
   $(document).ready(function(){
    $(".popup").hide();
    $(".work").on("click", function(e) {
        e.preventDefault();
        // 读取当前点击项的描述内容
        const itemDesc = $(this).find(".description").html();
        // 替换弹窗的描述文本
        $(".popup .description").html(itemDesc);
        $(".popup").show();
        $("iframe").eq(0).attr("src", $(this).attr("href"));
    })
      $(".popup").on("click", function(e) {
        $(".popup").hide();
        $("iframe").eq(0).attr("src", "");
        // 关闭弹窗时重置描述为LOADING，方便下次打开显示
        $(".popup .description").html("LOADING...");
      })
    });
    $(document).keyup(function(e) {
        if (e.key === "Escape") {
          $(".popup").hide();
          $("iframe").eq(0).attr("src", "");
          // 关闭弹窗时重置描述为LOADING
          $(".popup .description").html("LOADING...");
        }
      });
  </script>

改动说明 #

• 核心逻辑仅新增2行代码：点击.work时用find()方法获取当前点击元素下的.description子元素内容，再赋值给弹窗内的.description元素即可
• 额外在两处关闭弹窗的逻辑中新增了重置描述文本的代码，避免下次打开弹窗时还残留上一次的内容

如果你想要保留iframe加载过程中显示LOADING，加载完成后再替换为对应描述，可以把替换描述的逻辑放到iframe的load事件中：

// 把原来直接赋值描述的代码删掉，改成下面的逻辑
$("iframe").eq(0).off('load').on('load', function() {
  $(".popup .description").html(itemDesc);
})

内容的提问来源于stack exchange，提问作者davidw