Select div 中的 a 标签并使用 jQuery 制作弹出窗口

Question

我一直在尝试使用 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>

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

Answer 1

第二个元素可以用id引用，同样，函数调用有点错误。这是正确的版本：

$(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>

Select div 中的 a 标签并使用 jQuery 制作弹出窗口

Select an a tag inside a div and make a popup using jQuery

javascript

jquery

jquery-ui