时间戳

首页 > 解决方案 > 在 div 中选择一个标签并使用 jQuery 制作一个弹出窗口

javascript - 在 div 中选择一个标签并使用 jQuery 制作一个弹出窗口

问题描述

我一直在尝试使用 jQuery 为 div 内的第二个 A 标签制作弹出窗口。您可以在这里看到我尝试过的内容：

$(function() {
  $(".sites").find("a").eq(1).css("color", "red").dialog({
    autoOpen: false,
    show: {
      effect: "fade",
      duration: 500
    },
    hide: {
      effect: "fade",
      duration: 500
    }
  });

  $(".sites").find("a").eq(1).on("click", function() {
    $(".sites").find("a").eq(1).dialog("open");
  });
});
div {
  margin: 2rem 0 0 2rem;
  width: 300px;
  height: 150px;
  border: 1px solid gray;
}

a {
  display: block;
  font-size: 2rem;
  color: blue;
  padding: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<p>
  Finding the second a tag, colouring it in red, then display a pop-up on click when clicking Site 2
</p>


<div class="sites">
  <a href="https://www.site1.com">Site 1</a>
  <br>
  <a href="https://www.site2.com">Site 2</a>
</div>

如何强制对话框弹出窗口打开并显示“你好！”？

标签： javascriptjqueryjquery-ui

解决方案

您可以使用 Ids 来引用第二个元素，此外，函数调用略有错误。这是一个正确的版本：

$(function() {
  $("#site2").addClass("color-red");

  $("#site2").on("click", function(e) {
    e.preventDefault();
    $(this).dialog({
    autoOpen: false,
    show: {
      effect: "fade",
      duration: 500
    },
    hide: {
      effect: "fade",
      duration: 500
    }
  }).dialog( "open" );
  });
}());
div {
  margin: 2rem 0 0 2rem;
  width: 300px;
  height: 150px;
  border: 1px solid gray;
}

a {
  display: block;
  font-size: 2rem;
  color: blue;
  padding: 1rem;
}

.color-red {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<p>
  Finding the second a tag, colouring it in red, then display a pop-up on click when clicking Site 2
</p>


<div class="sites">
  <a id="site1" href="https://www.site1.com">Site 1</a>
  <br>
  <a id="site2" href="https://www.site2.com">Site 2</a>
</div>

推荐阅读